How to pass state in React from one class to another?

Question

I am building a web app with React using ES6 classes. I have an IndexPage.js file which adds data to a database and AdminLandingPage.js file which reads back all data currently in the database in it's componentDidMount() function.

Basically both are working separate now. I want to be able to save data in a state (an array) in IndexPage and then pass that state over to the other file where I can check if the array has data in it and set the state of the table (thus allowing me to not have to refresh the page).

IndexPage has this in it's constructor:

constructor(props) {
    super(props);

    this.state = {newbugs: []};
}

Here I am adding the data to the database and setting the state of the newbugs array:

addBug = (newBug) => {
  BugsApi.addBugData(newBug, data => {
    this.setState({newbugs: data})
  })
}

In my AdminLandingPage constructor I have:

constructor(props) {
    super(props);

    this.state = {bugs: []};
}

And componentDidMount() function where I am reading back all data currently in the database:

componentDidMount() {

    BugsApi.getBugData(data => {
      this.setState({bugs: data})
    })
}

^ This is where I would like to pass in the newbugs state array from my IndexPage check if it's got data in it and then update the bugs state array in this class.

Let me know if I can be more clear with my question. I have been stuck for hours on this now. Thanks!

Solution

state should be passed between components as props. For example:

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {newbugs: []};
  }

  ...

  render() {
    return (
      <AdminLandingPage bugs={this.state.newBugs}/>
    )
  }
}

class AdminLandingPage extends React.Component {

  ...

  componentDidMount() {
    // `newBugs`constant holds the bugs passed down from IndexPage
    const newBugs = this.props.bugs;
    BugsApi.getBugData(data => {
      this.setState({bugs: data})
    })
  }

  ...
}

Here IndexPage passes state.newBugs down to it's child component AdminIndexPage as the bugs prop

Comments

[omarjmh]

in this example you are passing the state around. I agree generally with what your saying but that first sentence is misleading. 'State should be passed between components as props" would be clearer

[Dan]

Only problem with this is I don't want to render the admin page inside the index page. If I were to place <AdminLandingPage bugs={this.state.newBugs}/> where you have it, it would render the entire component inside it.

[Dan]

Is there any way I can do this without rendering the admin page inside indexpage? I just want to pass props but not render the component.

[Red Mercury]

Then it sounds like a data management library like redux could help you. In redux you essentially have one state for the whole app. I really recommend egghead.io/courses/getting-started-with-redux by Dan Abromov, the creator of redux.

[Matt Smith]

The best way to do that (which has a big learning curve, depending how comfortable you are with React) is with Redux. Redux is a great way to manage the application state of a React App.

[sommesh]

But how to pass more than one state to another class?