Passing a function prop from parent to child

Posted on

in

,
const ChildBtn = ({ handleClick, btnText }) => {
    return <button onClick={() => handleClick()}>{btnText || "default btn text"}</button>;
  };

  const Parent = (props) => {
    const parentFunction = () => {
      console.log(props.consoleString || "default console text");
    };
  
    return <div><ChildBtn handleClick={parentFunction} btnText={props.btnText} /></div>;
  };

We have a Parent component that contains the child component “ChildBtn”. Parent has the function parentFunction which is passed into the child. We can also specify the console log text and the button text. We can then use the component like so:

<ChildBtn consoleString={"string here"} btnText={"apply"} />

One response to “Passing a function prop from parent to child”

  1. […] the same example as passing a function from parent to child but going in the opposite […]

Leave a Reply

Your email address will not be published. Required fields are marked *

About me

Mark Wong is a front end developer with 10+ years experience. Most of his knowledge of HTML5, CSS and Js is self taught.

Calendar

November 2024
M T W T F S S
 123
45678910
11121314151617
18192021222324
252627282930