CODEWITHSUNDEEP
javascriptreactjsreact-hooks
VanPersie
VanPersie

Reputation: 133

React child is not updating after after parent state changed

I've managed to add React elements dynamically depending on the content height Add React elements dynamically depending on the content height

I've prepared a codesandbox to show this:

https://codesandbox.io/s/html-react-parser-forked-8pl3b

However, the problem I'm having right know is that the child component, which shows the actual article, is not reacting to the state updated of its parent. This can be tested just by clicking on the Article 2 button.

Is it related to the usage of the reference? I can't figure out what is happening.

Upvotes: 0

Views: 199

Answers (1)

Zsolt Meszaros
Zsolt Meszaros

Reputation: 23141

It's because the Article component has its own state. The html prop you pass in const [article, setArticle] = React.useState(parse(html)); is the initial value and it's ignored when the prop changes.

You can use the useEffect hook to update the state when the prop's changed. You will also need to reset the didInsertAds state:

React.useEffect(() => {
  setArticle(parse(html));
  setDidInsertAds(false);
}, [html]);

Upvotes: 1

Related Questions