Show api data in JSX, React-CodePudding

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

CodePudding user response：

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>

                )

            })
                                    
        )

    }

CodePudding user response：

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