1

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 componentDidMount()?

Following is my sample code:

constructor() {
  super();
  this.state = {
    data: [],
  }
}
componentDidMount() {
  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}/>)
  })
}
Improve this question
2
  • 1
    Should data:{data} not be data={data}? 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. Commented Oct 9, 2017 at 10:39

2 Answers 2

Reset to default
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: [],
    }
}
componentDidMount() {
    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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Looks like there is a syntax error in this.

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

Improve this answer

1 Comment

We should not answer typo mistakes. There is an option to close the question, which you will receive once you have enough rep. But until then, I'd request you to wait a bit. Soon you will have right to comment. Use that for such question instead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.