Catch state of child component in React

Asked

Viewed 3,687 times

0

How do I catch a state of 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 component <SupermarketDetail /> and apply the return as props in the component <Nav /> instead of number 1.

Supermarketdetail.js is 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 wanted to receive in the father component this detailState. Any idea?

javascript react

  • You can set the state in the parent component, create a method in the parent that updates that state and pass via props to the child.

  • React - How to modify a parent component state from the child?

  • An example: https://stackblitz.com/edit/react-v7jeqm

  • Similarly, I would need the information that comes from the child component

  • From son to father will not be possible ( as far as I know ) if not as already commented. In your method handleState execute the parent method by passing as parameter number .. More would be better to create the state in the parent, so avoid code duplication.

2 answers

2


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

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;

You see I wrote a method called setDetailState the parent component, which changes the state of the parent component. Every time this method is executed, it will alter the state that in turn causes the rerender.

Already in the child component (<SupermarketDetail>), just invoke the parent component method 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;

Note that in the child component I am running the method I provided via props. As I said earlier, this method will alter the state of the parent component, and cause the component <Nav /> receive the value.

  • Man, very good!! I understood what you did, it helped me so much But it gives the error "Too Much recursion" I believe it is because I am

  • 1

    Yeah, that could be more complicated. just make sure that you are not setting the state in places of the life cycle that the rendering causes a change of state, because the change of state causes the render, then you enter a loop even

0

Answer is having battery limit by recursive

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

}

can correct using:

setDetailState(detailState) {
this.setState(...this.state.datailState, {
  detailState
})

}

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.