0
157
Vistas¿Cómo cambiar el nombre de los objetos en la matriz?
Estoy tratando de usar esta API, sin embargo, quiero usar un bucle for o un mapa a través de strMeasure & strIngredient. Actualmente esos tienen números de menos de 20 adjuntos. Entonces, ¿estoy pensando que primero necesito hacer una matriz usando un bucle for y luego implementarla? Déjame saber lo que piensas..
const [recipeData, setRecipeData] = useState([]); const ingredientList = recipeData.map((allData) => { const arr = []; for (let i = 1; i <= 20; i++) { arr.push(allData[`strMeasure${i}`] + " " + allData[`strIngredient${i}`]); } return arr; });Pero luego no sé cómo inyectar esto en mi componente.
¡Salud!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
En lugar de unirlos a una cadena, sugeriría almacenarlos como pares de clave y valor dentro de un objeto. De esta manera, es más fácil acceder a los valores en su interfaz de usuario.
const allData = { strIngredient1: "Beef", strIngredient2: "Plain Flour", strMeasure1: "1kg", strMeasure2: "2 tbs", … }; const items = []; for (let i = 1; i <= 20; i += 1) { const strIngredient = allData[`strIngredient${i}`]; const strMeasure = allData[`strMeasure${i}`]; items.push({ ingredient: strIngredient, measure: strMeasure, }); } // const items = [ // { // ingredient: "Beef", // measure: "1kg", // }, // … // ];Después de transformar sus datos, puede pasarlos fácilmente a su componente
function Recipe(props) { const { items } = props.items; return ( <ul> {items.map((item) => ( <li key={item.ingredient}> {item.ingredient}: {item.measure} </li> ))} </ul> ); } <Recipe items={items} />;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta