How to pass a Child component state to Parent Component state in React

Question

I am working on a React project, In my project I have two components Studentslist and Card.

In Studentslist component I have two buttons, one is Hockey and another one is Cricket.

Now when I click the Cricket button, then only Card component will show I have written logic like

That. Here Card component is Child to Studentslist component. In that Card component I have two

Buttons they are submit and cancel. Here when I click the cancel button on Card component the

Card component has to hide, but its not working. I think I have to write logic like this I have

To write one function in Card component and I have to pass that function to Studentslist

Component and that function have to update the state of the Student list component.

Please help me to solve this

If you feel I am not clear with my doubt, please put a comment.

This is Studentslist.js

import React, { useState } from 'react';
import './Studentslist.css';
import Card from '../../Components/Card/Card';

function Studentslist() {
    const [show, setShow] = useState(false);
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Departments'>
                        <button className='btn btn-primary'>Hockey</button>
                        <button onClick={() => setShow(true)} className='btn btn-primary ml-2'>Cricket</button>
                    </div>
                    {show && <Card></Card>}
                </div>
            </div>
        </div>
    )
}

export default Studentslist

This is Card.js

import React, { useState } from 'react';
import './Card.css';

function Card() {

    const [show, hide] = useState(true)
    return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-6'>
                    <div className='Registration'>
                        <form>
                            <div className="form-group">
                                <label htmlFor="firstname">Firstname</label>
                                <input type="text" className="form-control" id="firstname"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="lastname">Lastname</label>
                                <input type="text" className="form-control" id="lastname"></input>
                            </div>
                            <div className="form-group">
                                <label  htmlFor="email">Email</label>
                                <input type="email" className="form-control" id="email"></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" className="form-control" id="password"></input>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                            <button  type="button" onClick={() => hide(false)} className='cancel btn btn-danger ml-2'>Cancel</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Card

Answer 1

you can not pass children state to parent, you can pass setShow to cardComponent as props

{show && <Card setShow={() => setShow(false)}></Card>}

and in cardComponent you can use like below

function Card({ setShow }) {
...
<button  type="button" onClick={setShow} className='cancel btn btn-danger ml-2'>Cancel</button>