How to update state in child component with context value from parent (class components)

Question

I know how to do it with functional components (unless I'm mistaken).

const [childComponentStateVar, setChildComponentStateVar] = useState()

useEffect(() => {

    setChildComponentStateVar(context.newDataFromParent)

}, [context.newDataFromParent])

In this example every time context.newDataFromParent changes, the state will get updated.

But I don't know the equivalent in class based components and I haven't been able to find it online. Any help?

My other question is, does it ever make sense to do this?

Answer 1

1. In class components, you can do it with the componentWillReceiveProps lifecycle function of the component.

class Component extends React.Components {
  componentWillReceiveProps = (nextProps) => {
    if (nextProps.data !== this.props.data) {
      this.props.setChildComponentStateVar(data)
    }
  }
  
  render() {
    return ( <div /> );
  }
}

2. Hard to answer the question without any context of your use case