how can I passing data between the sibling component in React.js

Question

I have search box that store a search value in state , also I want to send this value to anthore component that is sibling with nav-bar .how can I do that ? this is my code

1-part one

const Nav = () => {
const [searched,setSearched] = useState();
return (
    <div className={style.main}>
        <input className={style.search} type="text" value={searched} onChange={(event)=>{setSearched(event.target.value)}} />
    </div>
);}

2-part two : sibling component

const Now_Weather = () => {
const [weather,setWeather] = useState({null})

useEffect(()=>{
    const setapi =async()=>{
        const data = await (current_name()); //I need to pass "searched" from nav-bar to here
        setWeather(data); //set resault of current_name() in waether.

    }
    setapi();
},[weather])

there is on solution use Context-api but I don't want to implement that.

Do you know another ways ?

Do you know about redux, it is state management, you can use it to share data in an app outside of the component tree. — Aleksandar Jockovic, Feb 05 '22 at 08:44

score 2 · Accepted Answer · answered Feb 05 '22 at 08:43

2

Lift the state up.

Move const [searched,setSearched] = useState(); to a shared ancestor component.

Pass searched as prop to Now_Weather.

Pass setSearched and searched as props to Nav.

answered Feb 05 '22 at 08:43

Quentin

914,110
126
1,211
1,335

I have used similar approach and it works. – sarfrazanwar Feb 05 '22 at 08:44

how can I passing data between the sibling component in React.js

1 Answers1