Example 2

 //==================A component==========

import React,{useState,useCallback} from "react";
import B from "./B";
export default function () {
const [name,setName]=useState(null);

const changeName=useCallback((n)=>{
        console.log("Name="+n);
        setName(n);
});

return (
    <div>
        <h1>A component</h1>
        <input value={name} onChange={(event)=>setName(event.target.value)} placeholder={'Please input name'}   />
        <h1>{name}</h1>
        <hr/>
        <B a={name}  changeName={changeName}/>
    {/*    setA={setName}*/}
    </div>
)
}

 //==================B component==========

export default function (obj) {
    //{a,setA}
    return (
        <div>
            <h1>B component</h1>
            <input value={obj.a} onChange={(event)=>obj.changeName(event.target.value)} placeholder={'Please input name'}   />
            <h1>{obj.a}</h1>
            <hr/>
        </div>
    )
}