How to pass props from functional component to class component

Question

I'm quite new to functional components and I've been on this for hours. I simply want to pass a prop from a parent functional component to a class child component so that I will use the updated prop (which will be a boolean) to change the display of an element. That's all.

In this scenario, I want to switch the sidenav from opened to closed based on the prop.

Here is the parent component (functional):

   let opened = false;

   function openSidenav(){
       opened = !opened;
   }
   const [sidebarOpened, setOpened ] = useState(opened);

   return (
       <Sidebar sidebarOpened={opened} />
   )

and the child component (class):

   componentDidUpdate(prevProps) {
      if(this.props.sidebarOpened !== prevProps){
         this.setState({ sidebar: true});
      }
   }

It's just not working, the child component isn't receiving changes, I guess I didn't pass the prop rightly. I know the code just needs correction but I don't know where I'm not getting it.

Thank you.

Answer 1

The argument to useState is only used once. You need to set the state in openSidenav function to trigger a re-render.

Parent

   function openSidenav(){
       setOpened(prev => !prev);
   }
   const [sidebarOpened, setOpened ] = useState(false);

   return (
       <Sidebar sidebarOpened={sidebarOpened} />
   )

Also in child component, use prevProps.sidebarOpened (not just prevProps).

Child

componentDidUpdate(prevProps) {
      if(this.props.sidebarOpened !== prevProps.sidebarOpened){ //<---- see here
         this.setState({ sidebar: this.props.sidebarOpened});//<---- see here
      }
   }

p.s - Also, since you are using props directly in child component, you can consider to not to copy props into state.