CODEWITHSUNDEEP
javascriptreactjs
Kechket
Kechket

Reputation: 1

How to trigger function in child component ? React

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.

Upvotes: 0

Views: 1587

Answers (1)

Augusto Oliveira
Augusto Oliveira

Reputation: 127

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)        
}

Upvotes: 1

Related Questions