Using the same example as passing a function from parent to child but going in the opposite direction.
const ChildBtn = ({ handleChild, consoleString, btnText }) => {
const childFunction = () => {
console.log(consoleString || "default console text");
};
return <button onClick={() => handleChild(childFunction)}>{btnText || "default btn text"}</button>;
};
const Parent = (props) => {
const callBackChild = (callback) => {
callback();
}
return <div><ChildBtn handleChild={callBackChild} btnText={props.btnText} consoleString={props.consoleString} /></div>;
};
Here the parent has a callback function and passes it to the child component. The child calls the callback with it’s own function as the argument. As before you can use the component like so:
<Parent consoleString={"string here"} btnText={"apply"} />
Leave a Reply