CODEWITHSUNDEEP
javascriptreactjs
blueFast
blueFast

Reputation: 44501

How to get data for a component

I have two pages (page1 and page2) with a SimpleTable component.

I have a page with a table for apples:

  render() {
    const props = this.props
    return (
      <Page {...props}>
        <SampleTable requestData={this.getApples} columns={[<columns for apples>]} />
      </Page>
    )
  }

And a page with a table for tomatoes:

  render() {
    const props = this.props
    return (
      <Page {...props}>
        <SampleTable requestData={this.getTomatoes} columns={[<columns for tomatoes>]} />
      </Page>
    )
  }

For reasons unknown to me, this particular child (SampleTable) is not being unmounted / mounted when I transition from page1 to page2 or vice-versa.

It is strange, since all the other children in all the other pages are being mounted / unmounted, even when I am using the same component for the children. So, clearly, I do not understand how / when does React decide to mount / unmount, or when does it decide to reuse a component. But I digress.

I will accept this fact: React will reuse children whenever it pleases.

My problem is that I am using Sampletable.componentDidMount to request data:

  componentDidMount() {
    console.log('SampleTable did mount. Requesting data ...')
    this.props.requestData(state.pageSize, state.page, state.sorted, state.filtered).then(res => {
      this.setState({
        data: res.rows,
        pages: res.pages,
        loading: false,
      })
    })
  }

But the function to request the data is provided by the parent, via props. I have the following problem:

What am I doing wrong?

How can I ensure that the change in props is triggering a data reload?

Upvotes: 0

Views: 68

Answers (1)

Mikail Bayram
Mikail Bayram

Reputation: 349

You should try using a unique key attribute on your SampleData component while calling it, so that react knows it a different instance of your component and re-render it accordingly.

You can find more about keys here: https://reactjs.org/docs/lists-and-keys.html

Upvotes: 1

Related Questions