In App.Js file I'm passing "This data is coming from Parent" to Child.Js

But here I want to pass this on button through onClick not dataParentToChild={data}. Just Like Child.Js file working in onClick={handleChildToProp}

enter the link description here

App.Js

function App(props) {

    // Child To Parent

    const [word, setWord] = useState("");

    const handleChildToParent = (words) => setWord(words);



    // Parent To Child

    const data = "This data is coming from Parent";



    return (

        <>

            <h1>"Parent Data"</h1>

            <h2>{word}</h2>

            <Child

                // Without button Working Fine

                dataParentToChild={data}

                // With button Working Fine

                dataChildToParent={handleChildToParent}

            />

        </>

    );

}

Child.Js

const Child = (props) => {

    // Parent To Child

    const handleChildToProp = () => {

        props.dataChildToParent("This data is comming from Child");

    };



    return (

        <>

            <h1>Child Components</h1>

            <h2>{props.dataParentToChild}</h2>

            <button onClick={handleChildToProp}>Data Child To Parent</button>

        </>

    );

};