Home

App.tsx

type AppProps = {}

export default function (props: AppProps): JSX.Element {

    const [text, setText] = useState<string>("***** ***");

    const modifyText = (text: string) => {
        setText(text);
    };

    return (
        <div id="daddy">
            <p>
                {text}
            </p>
            <Component
                f={(text) => { modifyText(text) }}
            />
        </div>
    );
}

Component.tsx

import { useState } from 'react';

type Props = {
    f: (text: string) => void
}

export default function (props: Props): JSX.Element {
    const [text, setText] = useState("");

    return (
        <div id="daddy jr">
            <input
                value={text}
                onChange={(v) => setText(v.target.value)}
            />
            <button
                onClick={() => { props.f(text) }}
            >Touch me daddy</button>
        </div>
    );
};