quiero compartir accesorios de componentes a niños hermanos. He leído sobre React Context pero no puedo implementarlo.
El componente de mi hogar se ve así:
const Home = () => { return ( <> <Navigation /> <SearchBar /> <Wrapper> <Filters /> <ProductsList /> </Wrapper> </> ); }Tengo estado de búsqueda en el componente SearchBar y necesito pasarlo al componente ProductList
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> );¿Alguien puede ayudarme a entender esto?
Puede declarar el estado en el componente principal ( Home ) y pasarlo como apoyo a los componentes secundarios como:
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> }