How to trigger function in child component ? React

Question

I need to triger child function inside parent component? I am using React

Parent component ->

selectedColors = (colors) => { 
   // need to props colors and trigger child function.
  };


    <Field
      id="primary-color"
      name="theme.primaryColor"
      component={ButtonColorPicker} 
     />

Child component is ButtonColorPicker

ButtonColorPicker component ->

  handleChange = (color) => {
    console.log("here i need props value from PARENT", color);
    this.props.input.onChange(color.hex);
  };

 <SketchPicker color={input.value} onChange={this.handleChange} />

import { SketchPicker } from "react-color";

SketchPicker is just plugin for changing colors.

I need from parent component to trigger handleChange function.

Put the handle function into your parent component an pass it to your child as a prop — SimonDX
– SimonDX, Commented Mar 6, 2022 at 19:34
I can;t because in child component i have some properties which i don;t have in parent — Kechket
– Kechket, Commented Mar 6, 2022 at 23:57
that's okay, just pass the function as a said, then you can call it inside your child component using the values you need from it — SimonDX
– SimonDX, Commented Mar 7, 2022 at 15:53

Augusto Oliveira · Accepted Answer · 2022-03-06 19:48:30Z

1

You can try this.

First, create a state that will determine when the function will be triggered.

const [trigger, setTrigger] = useState(false)

Now you pass trigger to your children component, and inside it you can create a useEffect with trigger inside your dependency array that will call your function.

useEffect(() => {
    // children function to be triggered is here.
}, [trigger])

Now, everytime you change your trigger state on parent component, the children function will be triggered.

On your parent component, you can do something like

selectedColors = (colors) => {
    setTrigger(true)

    // whatever you want.

    setTrigger(false)        
}

edited Mar 6, 2022 at 19:48

answered Mar 6, 2022 at 19:45

Augusto Oliveira

1371 silver badge9 bronze badges

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

5 Comments

Joel Hager Over a year ago

You could technically just pass the reference to the function as well.

Augusto Oliveira Over a year ago

I think the question title is missleading. If I understood it correctly, he wants to trigger a function from the children component, from an action inside parent.

Joel Hager Over a year ago

Right. So the function actually lives in the parent context and is passed down to the child through props so both can call the function.

Augusto Oliveira Over a year ago

Oh ok, now I get what you are talking. I guess this is a better solution if you want both components to have control over the function trigger.

Kechket Over a year ago

Ahhh friend, i am using class components :(

Collectives™ on Stack Overflow

How to trigger function in child component ? React

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related