Get state of child component in react

Question

Get state of child component in react

Navigation

#1 by (1 votes)

0

How do I get a state from a child component?

In my example I have Shell.js which is the parent component:

  class Shell extends Component {

  render() {
    return (
      <div>
        <Nav propsdaNav={1} />
        <SupermarketDetail />
      </div>
    );
  }
}

export default Shell;

I want to get the state of the <SupermarketDetail /> component and apply the return as props on the <Nav /> component instead of the number 1.

SupermarketDetail.js looks like this:

class SupermarketDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            detailState: 0
        }
    }
    handleState(number) {
        this.setState({ detailState: number });
    }
    componentDidMount() {
        this.handleState(1)
    }
    componentWillUnmount() {
        this.handleState(0)
    }

    render() {
        return (
            <div className="containerDetail">
          ....
            </div>
        );
    }
}
export default SupermarketDetail;

I would like to receive this detailState in the parent component. Any ideas?

javascript react

asked by anonymous 30.10.2018 / 05:53

1 answer

Input hidden control checkbox Adding values from a td column

score 1 · Accepted Answer

You can create a specific state to transpose this number in the parent component, in addition to a method that goes to the child component (via props ) and changes that state previously defined. With the changed state, you provide, via props , also the value for the <Nav /> component.

So your parent component would be something like

class Shell extends Component {

  constructor(props) {
    super(props)

    this.state = {
        detailState: 1
    }

    this.setDetailState = this.setDetailState.bind(this);
  }

  setDetailState(detailState) {
    this.setDetailState({
      detailState
    })
  }

  render() {
    return (
      <div>
        <Nav propsdaNav={this.state.detailState} />
        <SupermarketDetail detailStateCallback={this.setDetailState} />
      </div>
    );
  }
}

export default Shell;

Notice that I wrote a method called setDetailState in the parent component, which changes the state of this same component. Whenever this method is executed, it will change the state which in turn causes rerender .

In the child component ( <SupermarketDetail> ), you just invoke the method of the parent component via props . In a simplified way, it would be something like

class SupermarketDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      detailState: 0
    }
  }

  // Se você estiver setando o valor aqui
  handleState(number) {
    this.setState({ detailState: number });
    this.props.detailStateCallback(number);
  }

  // ...
  render() {
    return (
      <div className="containerDetail">
        {/* .... */}
      </div>
    );
  }
}
export default SupermarketDetail;

See that in the child component I'm running the method I provided via props . As I said earlier, this method will change the state of the parent component, and cause the <Nav /> component to receive the value.