How to write an interface for props?

Question

typescript

An array of objects comes to the MainTable component. I need to iterate over an array and substitute the values ​​into a table, but if the array is iterated using the map method, for example:

{data.map((element, index) => {
                console.log(element)
                return <tr key={index}>
                    <th scope="row">{index}</th>
                    <td>{element.title}</td>
                    <td> J. K. Rowling</td>
                    <td>8946472</td>
                    <td>
                        <button type="button" className="btn btn-primary mr-2">Edit</button>
                        <button type="button" className="btn btn-danger">Delete</button>
                    </td>
                </tr>
            })}

then when I access the element.title type, I get an error:

Property 'title' does not exist on type 'object'.

Main.tsx

import React, {useContext} from 'react';
import NavBar from '../components/NavBar';
import MainTable from '../components/MainTable';
import {BookContext} from '../context/bookContext';

const Main = () => {
    const books = useContext(BookContext) // will be [{title: 'Name,  author: 'Name'}]
    return (
        <div className='main'>
            <NavBar />
            <MainTable data={books} />
        </div>
    );
};

export default Main;

MainTable.tsx

import React from 'react';

interface IMainTableProps {
    data: object[]
}

const MainTable = ({data}: IMainTableProps) => {
    console.log(data)

    return (
        <table className="table container mt-3">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">ISBN</th>
                <th scope="col">Handlers</th>
            </tr>
            </thead>
            <tbody>
            {data.map((element, index) => {
                console.log(element)
                return <tr key={index}>
                    <th scope="row">{index}</th>
                    <td>{element.title}</td> // Здесь уже ошибка
                    <td> J. K. Rowling</td>
                    <td>8946472</td>
                    <td>
                        <button type="button" className="btn btn-primary mr-2">Edit</button>
                        <button type="button" className="btn btn-danger">Delete</button>
                    </td>
                </tr>
            })}
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>
                    <button type="button" className="btn btn-primary mr-2">Edit</button>
                    <button type="button" className="btn btn-danger">Delete</button>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td >Larry the Bird</td>
                <td>@twitter</td>
                <td>@twitter</td>
                <td>
                    <button type="button" className="btn btn-primary mr-2">Edit</button>
                    <button type="button" className="btn btn-danger">Delete</button>
                </td>
            </tr>
            </tbody>
        </table>
    );
};

export default MainTable;

Answer 1

interface IMainTableProps {
    data: {
        title: string;
    }[];
}