Así que tengo un componente de reacción con selección de entrada, que se encuentra en mi encabezado:

 import { useState } from "react"; function ChangeCurrency(){ const [selectValue, setSelectValue] = useState("USD"); function changeSelectValue(event) { setSelectValue(event.target.value); } return ( <select name="currencies" id="currencies" className={classes.changeCurrency} value={selectValue} onChange={changeSelectValue} > <option value="USD">$USD</option> <option value="GBP">£GBP</option> <option value="AUD">A$AUD</option> <option value="JPY">¥JPY</option> <option value="RUB">₽RUB</option> </select> ); }

y otro componente con productos, que está en contenido principal:

 import Products from "./Products"; import { useQuery, gql, } from "@apollo/client"; function ProductsAll(){ const GET_PRODUCTS = gql` query { category(input: { title: "all" }) { name products { id name gallery prices { currency { label symbol } amount } } } } `; const{loading,error,data} = useQuery(GET_PRODUCTS) if(loading){ return <div>loading...</div> } if(error){ return<div>error..</div> } return ( <Products data={data}/> ); } export default ProductsAll;

Tengo algunas categorías, por lo que hacer todo en una aplicación.js no es una opción (¿cómo puedo actualizar los datos del segundo elemento con el cambio de selección?