trying to load the props data into the jsx, when I try to iterate it inside the return, getting an error of .map not defined.
const SavedListTable = (props) => {
console.log(props);
const {listData, setListData} = props;
if(setListData.length > 0) {
return(
setListData.map((setListData, index) => {
console.log(setListData)
return(
<div>
<tr>
<td >{setListData.name}</td>
<td >Project</td>
<td>00 May 2022</td>
</tr>
</div>
)
})
)
}
this is the response from for console.log(props)
{notes: Array(8)}
notes: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
[[Prototype]]: Object
Use optional Chaining when using map function, it can cause errors sometimes due to the api response and when it comes, use optional chaining method in ES6. It will help you. And try to avoid console.log() in return, but if you want to use it, use like this {console.log()}
not a good question you can use array.map() to return this table rows
as this `const SavedListTable = (props) => {
return(
props.notes.map((row) => (
<div>
<tr>
<td >{row.name}</td>
</tr>
</div>
))
)
}`
use this package it would be more easier
https://www.npmjs.com/package/react-data-table-component
this is an example,you just have to parse array to DataTable component
https://react-data-table-component.netlify.app/?path=/docs/getting-started-examples--page
First pass the listData array and setListData function to props of this component and then you need to change setListData to listData, setListData is not the array but the function to set the list
const SavedListTable = (props) => {
console.log(props);
const {listData, setListData} = props;
if(listData.length > 0) {
return(
listData.map((data, index) => {
console.log(data)
return(
<div>
<tr>
<td >{data.name}</td>
<td >Project</td>
<td>00 May 2022</td>
</tr>
</div>
)
})
)
}