Me disculparé de antemano por la jerga incorrecta, recién comencé a codificar en noviembre.

Estoy usando esta API ( https://www.themealdb.com/api/json/v1/1/filter.php?i= ) para obtener idMeal, strMeal, strMealThumb de los objetos, que está mapeando tarjetas para completar diferentes recetas. (Componente de búsqueda)

Quiero que el usuario pueda hacer clic en él para ir a otro componente que usa otra API para completar la receta real (componente de receta) con la identificación del componente de búsqueda. www.themealdb.com/api/json/v1/1/lookup.php?i=${idMeal}

No estoy seguro de cómo proceder con esto. Estaba pensando en usar un enlace de enrutador React para saltar al otro componente, y necesito hacer que idMeal entre en estado para transferir de Buscar a Receta.

¿Debo usar Redux, Context o algo más?

 export default function Search() { const [isSearched, setSearched] = useState(""); const [meals, setMeals] = useState([]); const [isId, setId] = useState(""); const submitHandler = async (e) => { e.preventDefault(); // console.log(isSearched); const res = await axios.get( `https://www.themealdb.com/api/json/v1/1/filter.php?i=${isSearched}` ); setMeals(res.data.meals); }; useEffect(() => {}, [meals]); return ( <PageContainer> <ForkSpoonImg src={forkspoon} /> <form onSubmit={submitHandler}> <h2 style={{ textAlign: "center" }}>Please Search an Ingredient</h2> <Input type="text" onInput={(e) => setSearched(e.target.value)}></Input> <Button type="submit"> <SearchIcon /> </Button> </form> <CardContainter> {meals.map(({ idMeal, strMeal, strMealThumb }, index) => { return ( <Tag //<------- will change to Link, was just testing to see endpoint href={`www.themealdb.com/api/json/v1/1/lookup.php?i=${idMeal}`} key={index} > <Cards key={index} title={strMeal} url={strMealThumb} /> </Tag> ); })} </CardContainter> </PageContainer> ); }

¡Saludos cordiales!