Obtaining the react-calendar value once it is passed to another component

Question

Im trying to obtain the value of the react-calendar when it is passed from the Calendar component I created to the input component I created. How can I get the date once it is passed over? This is from the Input component-

import React from "react";
import Calendar from "./Calendar";

function Input()
{
    return(
        <div >
        <Calendar />
    

This is from the Calendar Component-

    import React, {useState} from "react";
import Calendar1 from "react-calendar";


function Calendar()
{
    const [value, onChange] = useState(new Date());
   
    
    return(
        

        <div class="d-flex justify-content-center">
            <Calendar1 
            onChange={onChange}
            value={value}
            /> 
            
            
        </div>
    );
}
export default Calendar;

Answer 1

As I understand, you want to keep the value of Calendar in his parent element Input. You can create hook not in the child component but in the parent, and pass setter as handler of change value callback (about onChange in Calendar read here ).

const Input = () => {
    const [inputValue, setInputValue] = useState('')

    const handleInput = value => setInputValue(value)

    return (
        <Calendar onChange={handleInput} />
    )
}

const Calendar = ({onChange}) => (
    <Calendar1 onChange={onChange} />
)