i want to share props from components to sibling children. I've read about React Context but can't implement it.
My home component looks like this:
const Home = () => {
return (
<>
<Navigation />
<SearchBar />
<Wrapper>
<Filters />
<ProductsList />
</Wrapper>
</>
);
}
I have search state in SearchBar component, and need to pass it to ProductList component
const [search, setSearch] = useState('');
const handleSetSearch = (e) => {
setSearch(e.target.value);
}
return (
<Wrapper>
<StyledTitle>inPal Search</StyledTitle>
<InputWrapper>
<StyledInput type="text" placeholder="Write something..." onChange={(e) => handleSetSearch(e)} />
<SearchIcon src={searchIcon} alt="Search" />
</InputWrapper>
</Wrapper>
);
Can someone help me to understand this?
You can declare the state in parent component (Home) and pass it as prop to both the child components as:
const Home = () => {
const [search, setSearch] = useState('');
return (
<>
<Navigation />
<SearchBar search={search} setSearch={setSearch} />
<Wrapper>
<Filters />
<ProductsList search={search} />
</Wrapper>
</>
);
}
import React, { createContext } from "react";
import ProductsList from "./ProductsList";
const [search, setSearch] = useState('');
const handleSetSearch = (e) => {
setSearch(e.target.value);
}
const Sr = createContext();
return (
<Wrapper>
<StyledTitle>inPal Search</StyledTitle>
<InputWrapper>
<StyledInput type="text" placeholder="Write something..." onChange={(e) => handleSetSearch(e)} />
<SearchIcon src={searchIcon} alt="Search" />
</InputWrapper>
<Sr.Provider value={search}>
<ProductsList/>
</Sr.Provider>
</Wrapper>
);
ProductList
import React, { useContext } from "react";
import { Sr } from "./App";
const ProductList = () => {
const sr = useContext(Sr);
return <h1> your value is here {sr} </h1>
}