Example 1

 //====================Component A==================

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

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} setA={setName}/>
    </div>
)
}

 //====================Component B==================

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