How to Call function in loaded component in react from main component?

I wanted to toggle a div in loaded component that div in the same component but the Button for call the function in my main layout component hoe to fix this ? Please help

required button in In Main Component Landing.js import React, { useState } from “react”;

//Get Code Toggle
const [isActive, setActive] = useState("false");
const handleToggle = () => {
setActive(!isActive)
};

{isActive ? “Get Code” : “Hide Code”}

Required toggle div in loaded sub component LandingSub1.js

 <div className={`codeview my-4 ${isActive ? "hide" : "show"}`}>
        <pre>Code</pre>
      </div>

https://codesandbox.io/s/call-function-from-main-component-to-inner-component-mp9mgp

Answer

1. pass the ‘isActive’ to your component:

   <LandingSub1 isActive={isActive} />

2. deconstruct it in your child component:

   const { isActive } = props;