Question 289409 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to call parent componet function on button click in reactjs?

I am trying to call parent function on button click . I am not aware how to achieve this .

parent component

export default function Message({ component }) {
  const [state, setState] = useState(false);

  const showMessage = ({ component }) => {
    setState(true);
  };
  return (
    <div>
      {component}
      {state ? <div>Message</div> : null}
    </div>
  );
}

now I am using this parent component .

import Message from "./message";

const EmbendComp = () => {
  const onClick = () => {
    alert("oooo");
  };
  return (
    <div className="App">
      <h1>Component</h1>
      <button onClick={onClick}>show Message</button>
    </div>
  );
};

export default function App() {
  return (
    <>
      <Message component={<EmbendComp />} />
    </>
  );
}

I want to call "showMessage" function on button click ..is it possible ? I want to "text" on button click..

here is my code
https://codesandbox.io/s/dazzling-gates-257xgw?file=/src/App.js:23-380

Tags:

2

Answers


  1. 0

    You can pass a callback function to Message which receives onClick and that onClick you can pass to EmbedComp and pass it as args:

    CODESANDBOX

    function Message({ component }) {
  const [state, setState] = useState(false);

  const showMessage = () => {
    setState(true);
  };

  return (
    <div>
      {/* CHANGE */}
      {component(showMessage)}
      {state ? <div>Message</div> : null}
    </div>
  );
}

const EmbendComp = ({ onClick }) => {
  return (
    <div className="App">
      <h1>Component</h1>
      {/* CHANGE */}
      <button onClick={onClick}>show Message</button>
    </div>
  );
};

export default function App() {
  return (
    <>
      {/* CHANGE */}
      <Message component={(onClick) => <EmbendComp onClick={onClick} />} />
    </>
  );
}

    You can also pass whole component to Message and when you call it then you can pass the onClick as:

    CODESANDBOX

    function Message({ Component }) {
  const [state, setState] = useState(false);

  const showMessage = () => {
    setState(true);
  };

  return (
    <div>
      {/* CHANGE */}
      <Component onClick={showMessage} />
      {state ? <div>Message</div> : null}
    </div>
  );
}

const EmbendComp = ({ onClick }) => {
  return (
    <div className="App">
      <h1>Component</h1>
      {/* CHANGE */}
      <button onClick={onClick}>show Message</button>
    </div>
  );
};

export default function App() {
  return (
    <>
      {/* CHANGE */}
      <Message Component={EmbendComp} />
    </>
  );
}
    Login or Signup to reply.
  2. 0

    You can do it by passing the parent component’s params to component

    import Message from "./message";

const EmbendComp = ({ onClick }) => {
  return (
    <div className="App">
      <h1>Component</h1>
      <button onClick={onClick}>show Message</button>
    </div>
  );
};

export default function App() {
  return (
    <>
      <Message component={(onMessageClick) => <EmbendComp onClick={onMessageClick} />} />
    </>
  );
}

    And modify Message component like below

    export default function Message({ component }) {
  const [state, setState] = useState(false);

  const showMessage = ({ component }) => {
    setState(true);
  };
  return (
    <div>
      {component(showMessage)}
      {state ? <div>Message</div> : null}
    </div>
  );
}

    You can try this out in this sandbox

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search