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
pass the 'isActive' to your component:
<LandingSub1 isActive={isActive} />
deconstruct it in your child component:
const { isActive } = props;