Why doesn't go my props to child component when I changed my props in Main Component?

user_9226276 0
Viewed 42

When I change my state, I can read newData in Main Component but my update state doesn't go my ChildComponent. I read only initialData in my ChildComponent. Why doesn't go my new props to ChildComponent? or Why doesn't reRender my ChildComponent ?

class Main extends Component{
 constructor(props) {
        super(props);
        this.state = {
          data: "initalData",
        }
}

componentDidMount(){
this.changeState();
}

changeState(){
this.setState({data: "newData"})
}

render(){
console.log("my data in Main :",this.state.data)
return(
<ChildComponent dataProps={this.state.data}>
)
}

class ChildComponent extends Component{
constructor(props) {
        super(props);
        const getData = props.dataProps;
        console.log("getData is ",getData)
        this.state = {
          ...,
        }
}
}
react-props react-component reactjs
2 Answers

It's because the constructor of the class component only run once when you initialize it but not every render.

To always get the latest value, you would need to put them inside the class component body below the constructor.

Something like this:

class ChildComponent extends Component{
  constructor(props) {
          super(props);
          this.state = {
            ...
          }
  }

  const getData = this.props.dataProps;
  console.log("getData is ", getData)

  render() (
    ...
  )
}
user_51226150

You can use the below to update each time props that get passed to it changes

componentDidUpdate(prevProps, prevState, snapshot){
    if(prevProps !== this.props){
    this
  }
}

ComponentDidUpdate docs

user_128679140
Related