CODEWITHSUNDEEP
reactjsreduxnext.jscomponentsstate
Arvinmo
Arvinmo

Reputation: 85

passing props form child to parent component in react

return
 <div>
    <RadioOptions />
    <GenButton />
    <OutputPass />
 </div>

I recently worked on my side-project and I found an issue in my code. inRadiooptions  I used some useState hooks, and I want to pass that state from Radiooptions component to its parent(passGen) and then from there, pass that state toGet Button component to check some condition and if nothings wrong, generate the password. (I'll also attach my GitHub repo for better access to my source code)

https://github.com/arviinmo/palora/tree/main/components/passwordgenerator

Upvotes: 8

Views: 34997

Answers (2)

nourhomsi
nourhomsi

Reputation: 382

For the newcomers here do it so:

Parent component:

import Child from './Child';
export default function Parent() {
        const data_from_child = (data) => {
        console.log(data); // or set the data to a state
    }

    return (
        <Child setter={data_from_child} /> //pass the function to the child
    )
}

Child component:

export default function Child ({setter}) {
    setter('Data from Child');
    return (<></>)
}

Upvotes: 6

Aymendps
Aymendps

Reputation: 1530

You can't pass props from child to parent in React, it's only one way (from parent to child).

You should either:

  • Put the state in the parent component and manipulate it from the child component by passing the setter function in the props
  • Use something like Redux Toolkit to create a global state that all components can have access to

Upvotes: 16

Related Questions