react hooks passing props to parent code example

Example 1: react pass prop to parent

//Form (Parent)
import React, { useState, Component } from 'react';
import Input from '../../shared/input-box/InputBox'

const Form = function (props) {

    const [value, setValue] = useState('');

    const onchange = (data) => {
        setValue(data)
        console.log("Form>", data);
    }

    return (
        <div>
            <Input data={value} onchange={(e) => { onchange(e) }}/>
        </div>
    );
}
export default Form;

//Input Box (Child)
import React from 'react';

const Input = function (props) {
    console.log("Props in Input :", props);

    const handleChange = event => {
        props.onchange(event.target.value);
    }

    return (
        <div>
            <input placeholder="name"
                id="name"
                onChange= {handleChange}
            />
        </div>
    );
}
export default Input;

Example 2: React hooks update parent state from child

const EnhancedTable = ({ parentCallback }) => {
    const [count, setCount] = useState(0);
    
    return (
        <button onClick={() => {
            const newValue = count + 1;
            setCount(newValue);
            parentCallback(newValue);
        }}>
             Click me {count}
        </button>
    )
};

class PageComponent extends React.Component { 
    callback = (count) => {
        // do something with value in parent component, like save to state
    }

    render() {
        return (
            <div className="App">
                <EnhancedTable parentCallback={this.callback} />         
                <h2>count 0</h2>
                (count should be updated from child)
            </div>
        )
    }
}