score:0

you can pass the data from child to parent by calling a function passed from parent with the data you want to send as a parameter - like an event handler callback.

let's say if you want to send students of your child component to parent when you click on an element:

const parent = () => {
    const onupdate = (data) => {
         // use the data
    };

    return (
        <div classname='container'>
            <div classname='row'>
                <div classname='col-12'>
                    <div classname='one'>
                        <child update={onupdate}></child>
                    </div>
                </div>
            </div>
        </div>
    )
}
const child = ({ update }) => {
    const students = ['jasmine', 'stella']

    return (
        <div classname='container'>
            <div classname='row'>
                <div classname='col-12'>
                     <button click={() => update(students)} />
                </div>
            </div>
        </div>
    )
}

but if you have to pass data between components nested deeply, you should consider to use redux or context.

score:0

to do this, you have two easiest ways,

  1. use react context
  2. use react prop callback

i suggest you use the first way and here is an example of implementing the redux context feature into your app based on your question's codes.

demo


Related Query

More Query from same tag