Trigger a function in another component on click a button from a different component in React

Question

I am trying to trigger a start function in a different componentB when I click the start button in componentA

Note: Both components are neither parent to child components

Component A

import React from "react"

function ComponentA(props) {        
  return (
    <div>
      <button>Start</button>
    </div>
  )
}

export default ComponentA;

Component B

import React from "react";

function ComponentB(props) {
  const [isStarted, setStarted] = React.useState(false);

  const start = () => setStarted(true);

  return <div>{isStarted ? "Starting..." : "Not Starting.."}</div>;
}

export default ComponentB;

They must be children of something even if it is just the window. start() and the associated state should be passed down from the parent of both. — pilchard
– pilchard, Commented Nov 1, 2020 at 13:06

BeFoRE · Accepted Answer · 2020-11-01 13:59:03Z

2

One way you could do it is by creating a callback prop on ComponentA, changing the state of the parent component of ComponentA and passing it to ComponentB via a prop and capture that prop change with a useEffect.

Example:

Parent

function Parent(){
  const [started, setStarted] = useState(false)

  return(
    <div>
      <ComponentA onClick={() => setStarted(true)}/>
      <ComponentB started={started}/>
    </div>
  )
}

ComponentA

function ComponentA({onClick}){
  return(
    <div>
      <button onClick={() => onClick()}/>
    </div>
  )
}

ComponentB

function ComponentB({started}) {
  const [isStarted, setStarted] = React.useState(started);

  useEffect(() => {
    setStarted(started)
  }, [started])

  return <div>{isStarted ? "Starting..." : "Not Starting.."}</div>;
}

Another way would be using useContext:

https://reactjs.org/docs/hooks-reference.html#usecontext

https://reactjs.org/docs/context.html

Honestly, I am a bit lazy to also include an example which is in my opinion worse. Here is an example that uses useContext that might be useful. https://stackoverflow.com/a/54738889/7491597

edited Nov 1, 2020 at 13:59

answered Nov 1, 2020 at 13:06

BeFoRE

1181 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ojay Over a year ago

Please how do I make use of the useContext?

BeFoRE Over a year ago

I advise against using useContext everywhere in your app, especially when only one component needs information from another (which is in your case). useContext should really only be used if multiple components need the same application wide data. That being said you can find the documentation here: reactjs.org/docs/context.html

Ojay Over a year ago

Ok, please can you show a quick demo using my question above?

RobbieC Over a year ago

I'm just learning react/nextjs too and I was looking for the same solution, found this thread and did @BeFoRE 's 1st recommendation and it worked first try. I even passed "started" from componentB to a child component under componentB and it worked, so stoked!

Collectives™ on Stack Overflow

Trigger a function in another component on click a button from a different component in React

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related