import React, { useEffect, useCallback } from 'react';
import MaterialTable from 'material-table';

export default function MaterialTableDemo(props) {
const {todos} = props;

console.log('hurray',todos);
const [state, setState] = React.useState({
columns: [
{ title: 'Topic', field: 'topic' },
{ title: 'Start Date', field: 'startDate' , type: 'date'},
{ title: 'End Date', field: 'endDate', type: 'date' },
{
title: 'Level', field: 'level', type: 'numeric'
},
{
title: 'Comments', field: 'comments'
}
],
// having problem HERE !!!!! NOT RENDERING THE DATA INITIALLY
data: todos.map((row)=>{
return row
})

});

//Table data is WORKING WITH useEffect and useCallback hooks
// const dataNeeded =useCallback(()=> props.todos.map((row,index)=>{
// return row;
// }),[props.todos]);

// useEffect(()=>{
// setState({
// ...state.columns,
// data: dataNeeded()
// })
// }, [dataNeeded])

return (
title="Editable Example"
columns={state.columns}
data={state.data}
/>
);
}