Tengo una aplicación React y la estructura de componentes se ve a continuación

aplicación.componente.ts

 <App> <Products></Products> </App>

producto.componente.ts

 export const ProductComponent = () => { const [category, setcategory] = useState("retail"); const [products, setProducts] = useState([]); const categorySelectHandler = (selectedCategory:string) => { setcategory(selectedCategory); } useEffect(() => { getProductsByCategory(category).then((products) => { setProducts(products); } }); }, [category]); return ( <> <CategorySelector onCategorySelected={categorySelectHandler }></CategorySelector> { products.map((product) => { return ( <div> <b> {product.name} </b> <i> {product.price} </b> } </>}

categorySelector.component.ts

 const CategorySelector: React.FC <CategorySelectorProps> = ({ onCategorySelected, }) => { const emptydata: Data[] = []; const [category, setcategory] = useState("retail"); const [data, setdata] = useState(emptydata); const categorySelectorHandler = (e: SyntheticEvent) => { e.preventDefault(); const element = e.target as HTMLInputElement; setcategory(element.value); onCategorySelected(element.value); }; return ( <div> <select defaultValue = {category} onChange = {categorySelectorHandler} > <option value = "retail" > Retail </option> <option value = "electronics" > Electronics < /option> </select> { data.map((_data: data) => { return ( <a href = "#" > { _data.name } < /a> < /div> ); }) } </div> )}; export default CategorySelector;

Aquí, en el evento de cambio del menú desplegable en el componente CategorySelector ( un componente secundario ), obtengo el valor seleccionado y lo paso al componente ProductComponent onChange Y esto, a su vez, desencadena una llamada ajax a la API que devolvería la lista de productos según la categoría seleccionada.

Hasta esto no hay problema

Ahora, en el mismo evento, necesito devolver la lista de productos al componente secundario, es decir, CategorySelector

Larga historia corta

En un evento en el componente secundario, pase los datos al componente principal ( no hay problema aquí ), sin embargo, en el mismo evento, necesito devolver los datos al componente secundario desde el componente principal .