Espero haber formulado esta pregunta con claridad. Tengo una pequeña aplicación de recetas, para el método de recetas quiero agregar dinámicamente el Step 1, Step 2, Step 3 etc. para cada paso que se pasa a través de accesorios.
Los pasos de la receta se transmiten como una matriz de objetos:
recipeMethod: Array(2) 0: {step_instructions: 'Boil Water'} 1: {step_instructions: 'Heat Oil'} length: 2Estoy tratando de hacer que esta matriz se muestre como
Step 1 Boil Water Step 2 Heat Oil Y, además, se agregarían pasos para cualquier otro objeto de método de receta. Actualmente solo puedo hacer que se step_instructions las instrucciones de paso, pero no puedo obtener los pasos que se incrementan dinámicamente (eso debería comenzar en 1 )
Aquí está el código relevante:
import './MethodStep.css' import React from 'react' let methodArray function mapMethod() { return methodArray.map((item, idx) => ( <React.Fragment key={idx}> <div className="method-step small-header"></div> <div className="method-text">{item.step_instructions}</div> </React.Fragment> )) } function MethodStep(props) { methodArray = props.recipeMethod || [] return <div className="recipe-method-container">{mapMethod()}</div> } export default MethodStepcomo @louys mencionó anteriormente, puede lograrlo fácilmente usando
Pasos {idx + 1}Arriba imprimirá cada índice de methodArray después de agregar 1.
También noté que estás usando Index como clave. Esta es una práctica incorrecta ya que la clave debe ser siempre única. Puede agregarle una cadena para que sea único.
como abajo:
<Reaccionar.Fragmento clave={ step-${idx} }>
Aquí tienes, solo tendrás que cambiar la inicialización de methodArray para igualar props.recipeMethod.
import React from "react"; function mapMethod(methodArray) { return methodArray.map((item, idx) => ( <React.Fragment key={idx}> <div className="method-step small-header">Step {idx + 1}</div> <div className="method-text">{item.step_instructions}</div> </React.Fragment> )); } function MethodStep(props) { const methodArray = [ { step_instructions: "Boil Water" }, { step_instructions: "Heat Oil" }, ]; // this is props.recipeMethod; return ( <div className="recipe-method-container">{mapMethod(methodArray)}</div> ); } export default MethodStep;Debe vincular la matriz al estado del componente. Podrías construir tu propio gancho manejando esto por ti.
He aquí un ejemplo básico:
function useRecipe(initialRecipe) { const [recipe, setRecipe] = useState(initialRecipe) const addStep = step => { recipe.push(step) setRecipe(recipe) } return [recipe, addStep] } function mapMethod(recipe) { return recipe.map((item, idx) => ( <React.Fragment key={idx}> <div className="method-step small-header"></div> <div className="method-text">{item.step_instructions}</div> </React.Fragment> )) } function MethodStep(props) { const [recipe] = useRecipe(methodArray) return <div className="recipe-method-container">{mapMethod(recipe)}</div> }