How would I change the state in the parent component from the child in React?

Question

I have a parent component that contains a modal which I want to show/hide onClick of an element in a child component. How can I now basically call that handler in the parent company from the child component click?

My idea was to somehow provide the handler via the props from the parent to the child:

// parent components import PlannerDetails from "./PlannerDetails"; import PlannerTools from "./PlannerTools"; import {useState} from "react"; const PlannerWrapper = () => { const [showTools, setShowTools] = useState(false) const toolsHandler = () => { setShowTools(true) } return ( <div className="wrapper w-6/6 h-full flex bg-dotted bg-sx-white"> <div className="right-wrapper w-3/6 h-full p-8"> <div className="details-wrapper w-full h-full bg-sx-white-plain rounded-2xl shadow-sx-shadow"> <PlannerDetails/> </div> </div> {showTools ? <PlannerTools/> : null} </div> ) } export default PlannerWrapper

// child component import imageEdit from "../../assets/images/edit.svg" const PlannerDetails = (props) => { return ( <div className="details-wrapper"> <div className="details-head flex border-b-1 border-b-gray"> <div className="text-2xl text-sx-purple-dark p-4">Offer Details</div> <div className="icon-wrapper flex"> <img src={imageEdit} className="w-4 cursor-pointer" onClick={props.toolsHandler}/> // <--------- click event here </div> </div> </div> ) } export default PlannerDetails

Updated approach

// Parent import PlannerDetails from "./PlannerDetails"; import PlannerTools from "./PlannerTools"; import {useState} from "react"; const PlannerWrapper = () => { const [showTools, setShowTools] = useState(false) const toolsHandler = () => { console.log('test') setShowTools(true) } return ( <div className="wrapper w-6/6 h-full flex bg-dotted bg-sx-white"> <div className="right-wrapper w-3/6 h-full p-8"> <div className="details-wrapper w-full h-full bg-sx-white-plain rounded-2xl shadow-sx-shadow"> <PlannerDetails toolsHandler={toolsHandler} /> </div> </div> {showTools ? <PlannerTools/> : null} </div> ) } export default PlannerWrapper

// Child import imageEdit from "../../assets/images/edit.svg" const PlannerDetails = (toolsHandler, ...props) => { return ( <div className="details-wrapper"> <div className="details-head flex border-b-1 border-b-gray"> <div className="text-2xl text-sx-purple-dark p-4">Offer Details</div> <div className="icon-wrapper flex"> <img src={imageEdit} className="w-4 cursor-pointer" alt="editTools" onClick={props.toolsHandler}/> </div> </div> </div> ) } export default PlannerDetails

Hao-Jung Hsieh · Accepted Answer · 2022-04-07 17:05:31Z

2

You are very close to the answer, You just need to pass the function in your parent component to the child.

like this

 <PlannerDetails toolsHandler={toolsHandler} />

the first toolsHandler is the prop property in the child component, the second toolsHandler is the function in parents component.

answered Apr 7, 2022 at 17:05

Hao-Jung Hsieh

8771 gold badge8 silver badges18 bronze badges

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

2 Comments

JSRB Over a year ago

thanks for your help! I tried to include this in my code but nothing happens on click if the image. Is there another bug in my code? I added my last approach to the answer.

JSRB Over a year ago

ah i passed the arguments wrongly into the child's render function - thanks!

Collectives™ on Stack Overflow

How would I change the state in the parent component from the child in React?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related