How to pass props between child functional components in React?

Question

React

Good afternoon, there is a parent component App and two child components Header and Main how to pass props from header to main????

Answer 1

It can be like this:

export default Header = ({ setProp }) => {
    return (
        <button onClick={() => setProp('hello')}>Ok</button>
    )
}

export default Main = ({ prop }) => {
    return (
        <div>{prop}</div>
    )
}

export default App = () => {
    const [mainProp, setMainProp] = useState('');
    return (
        <>
            <Header setProp={setMainProp} />
            <Main prop={mainProp}/>
        </>
    )
}

Answer 2

create it in App and then pass it to the children, otherwise useContext can be used. In general, if there was a code, it would be possible to suggest