I want to fetch an rest api data into the react table. How do I set the row data inside the react table from the value that is got in ponentDidMount()?

Following is my sample code:

constructor() {
  super();
  this.state = {
    data: [],
  }
}
ponentDidMount() {
  fetch('.json').then((Response) => Response.json()).
  then((findresponse) => {
    console.log(findresponse.movies)
    this.setState({
      data: findresponse.movies
    })
  })
}


render() {
  this.state.data.map((dynamicData, key) => {
      const data = [{
          name: {
            this.dynaimcData.title
          },
          age: {
            this.dynamicData.releaseYear
          }]
      })

    const columns = [{
        Header: 'Name',
        accessor: 'name'
      },
      {
        Header: 'Age',
        accessor: 'age'
      }
    ]

    return (<ReactTable data: {data} column: {columns}/>)
  })
}

I want to fetch an rest api data into the react table. How do I set the row data inside the react table from the value that is got in ponentDidMount()?

Following is my sample code:

constructor() {
  super();
  this.state = {
    data: [],
  }
}
ponentDidMount() {
  fetch('https://facebook.github.io/react-native/movies.json').then((Response) => Response.json()).
  then((findresponse) => {
    console.log(findresponse.movies)
    this.setState({
      data: findresponse.movies
    })
  })
}


render() {
  this.state.data.map((dynamicData, key) => {
      const data = [{
          name: {
            this.dynaimcData.title
          },
          age: {
            this.dynamicData.releaseYear
          }]
      })

    const columns = [{
        Header: 'Name',
        accessor: 'name'
      },
      {
        Header: 'Age',
        accessor: 'age'
      }
    ]

    return (<ReactTable data: {data} column: {columns}/>)
  })
}

• javascript
• reactjs
• fetch-api

• 1 Should data:{data} not be data={data}? – Rajesh Commented Oct 9, 2017 at 10:22
• and this.state.data.map((dynamicData, key) => {...} should be inside return. You haven't written return statement inside render. – Narasimha Reddy - Geeker Commented Oct 9, 2017 at 10:39

2 Answers 2

At last found the answer... but I didn't use the react table... I wasn't able to find the answer for it.. Instead I used the ordinary Html table.. This isn't the proper answer for my question.. but considering it will be useful for someone I'm posting this answer...

constructor() {
    super();
    this.state = {
        data: [],
    }
}
ponentDidMount() {
    fetch('https://facebook.github.io/react-native/movies.json').then((Response) => Response.json()).
            then((findresponse) =>
            {
                console.log(findresponse.movies)
                this.setState({
                    data: findresponse.movies
                })
            })
}
render()
{


    return(
            <table className="tat"> 
    <tr><th>name</th><th>year</th></tr>
        {
                this.state.data.map((dynamicData) =>
            <tr className="trow"> <td>  {dynamicData.title} 
        </td> <td> {dynamicData.releaseYear} </td>
                                </tr>
                               ) }
                        </table>


            )
}

Output:

Output for fetching api values inside table

I wasn't able to setState in the React table but in here it's a little easy to define the api for the table data a little easier since its fully defined by us. So I did defined a default structure for the table and then by using the data map function I'm inserting the values inside the table row dynamically. So its also useful for creating dynamic amount of rows as per needed. The only disadvantage of using the HTML table is that we have to define the further functionalities of the table lie sorting but in the React table there are pre-defined functionalities which could be used.

If anyone could give the answer for fetching the api values inside the React Table it would be more useful.

Thank you.

Looks like there is a syntax error in this.

Can you use <ReactTable data={data} column={columns} /> and see if it works?