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