CODEWITHSUNDEEP
javascriptreactjs
whitebear
whitebear

Reputation: 12461

How to reload child component when the state of parent class changed

in Parent class, I pass the item to child component.

<InfoWidget bar={this.state.bar}> 
</InfoWidget>

then,receive data and use prop.bar here

const InfoWidget = (props) =>{
  const [length, setLength] = useState([]);
  const classes = useStyles();
  useEffect(() => {
 
    setLength( props.bar * 10);
  }, []);
  return(
    <Paper> 
     {length}
    </Paper>
  );
}

First load it works well, but when the state.bar of parent class changed, child component is not reloaded.

I want to reload the child component ,every time the value of parent class changed.

Where should I change?

Upvotes: 0

Views: 1088

Answers (2)

Ram Segev
Ram Segev

Reputation: 2571

Add key to parent, when the key changes it will rerender the component

<InfoWidget key={this.state.bar} bar={this.state.bar}> 
</InfoWidget>

Upvotes: 0

Chrillewoodz
Chrillewoodz

Reputation: 28368

Add it as a dependency:

useEffect(() => {
  setLength(props.bar * 10);
}, [props.bar]);

Upvotes: 4

Related Questions