Quiero mostrar información en mi aplicación de dos matrices asignadas.
{filmWorld.Provider && filmWorld.Movies.map((movie, index) => { return ( <div className="movies" key={index}> <h3>{movie.Title}</h3> <img src={movie.Poster} alt={movie.Title} /> <h5>{movie.Actors} </h5> <h6> Price: ${movie.Price}</h6> <hr /> </div> ); })}Actualmente funciona bien, pero quiero que se muestre otro precio de otro cine idealmente en el mismo h6. Toda la demás información es la misma.
el otro mapa seria muy similar:
{cinemaWorld.Provider && cinemaWorld.Movies.map((movie, index) => { return ( <div className="movies" key={index}> <h6> Price: ${movie.Price}</h6> </div> ); })}pero nuevamente, solo necesitaría que el precio de este cine se muestre en la misma etiqueta h6. ¿O sería más intuitivo adoptar un enfoque diferente, como fusionar las variables?
El código de resultado final ideal devolvería algo como esto:
return ( <div className="movies" key={index}> <h3>{movie.Title}</h3> <img src={movie.Poster} alt={movie.Title} /> <h5>{movie.Actors} </h5> <h6> FilmWorld Price: ${movie.Price} CinemaWorld Price: ${movie.Price}</h6> <hr /> </div> ); })}Entonces, la página mostraría el nombre de la película, una imagen del póster de la película, una lista de los actores y una comparación de precios de los dos cines que muestran la película. Estoy almacenando datos de dos apis diferentes en estas variables.
Usaría un memo hook para crear la estructura de datos que desea
const movies = useMemo(() => { if (!filmWorld.Provider) return []; return filmWorld.Movies.map((movie, index) => ({ ...movie, cinemaWorldPrice: cinemaWorld.Provider && cinemaWorld.Movies[index]?.Price, })); }, [filmWorld, cinemaWorld]); Esto toma el índice correspondiente de cinemaWorld.Movies (con una condición en cinemaWorld.Provider ).
Ahora puedes simplemente iterar la matriz de movies .
{ movies.map((movie, index) => ( <div className="movies" key={index}> <h3>{movie.Title}</h3> <img src={movie.Poster} alt={movie.Title} /> <h5>{movie.Actors} </h5> <h6> Price: ${movie.Price} CinemaWorld Price: ${movie.cinemaWorldPrice} </h6> <hr /> </div> )); }