react-table not showing data

Question

I am new in React and JS. Trying to use react-table and sending data from class to function. Data coming from props is showing in console but not appearing in react-table. Below is the code and result of console.log. Please tell my mistake and what topic do I cover to improve.

Note: If replace this line:

const result = props.state;

with:

const result = props.state.data;

show error data is undefined.

function Showdata(props){
    // Result of below console.log is in attached image.
    console.log(props.state.data);
    const columns = useMemo(
        () => [
                {
                    Header: 'Column 1',
                    accessor: 'props.state.data.id', // accessor is the "key" in the data
                },
                {
                    Header: 'Column 2',
                    accessor: 'props.state.data.TeamName',
                },
            ],
        []
    );

    const [data, setData] = useState([]);

    useEffect(() => {
        (async () => {
            /*If replace below line with const result = props.state.data; show error "data is undefined".*/
            const result = props.state;
            setData(result.data);
            console.log(result.data);
        })();
    }, []);

    return (
        <div className="App">
            <Table columns={columns} data={data} />
        </div>
    );


const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
} = useTable({ columns, data });

    return (
        <div>
            <p>Data of {props.state.category}</p>
  <table {...getTableProps()}>
    <thead>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map(row => {
        prepareRow(row)
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map(cell => {
              return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            })}
          </tr>
        )
      })}
    </tbody>
        </table>
    </div>
  )
}

Answer 1

I see mistake in your columns:

const columns = useMemo(
  () => [
    ...
      accessor: 'props.state.data.id',
    ...
      accessor: 'props.state.data.TeamName',
    ...
);

There can't be accessor like props.state.data.id. In your console I see array of data objects like:

[{ id: ..., TeamNameL ... }]

And you should give this fields like:

const columns = useMemo(
  () => [
    ...
      accessor: 'id',
    ...
      accessor: 'TeamName',
    ...
);

Also you can see official example.