Increment number for every instance of an element in React-CodePudding

I hope I phrased this question clearly. I have a small recipe app, for the recipe method I want to dynamically add Step 1, Step 2, Step 3 etc. for each step that is passed through via props.

The recipe's steps are passed through as an array of objects:

recipeMethod: Array(2)
0: {step_instructions: 'Boil Water'}
1: {step_instructions: 'Heat Oil'}
length: 2

I am trying to get this array to display as

Step 1
Boil Water

Step 2
Heat Oil

And additionally steps would be added for any further recipe method objects. Currently I can just get the step_instructions to display but cannot get the dynamically incrementing steps (that should start at 1)

Here is the relevant code:

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 MethodStep

CodePudding user response：

as @louys mentioned above you can easily achieve that using

Steps {idx 1 }

Above will print the each index of methodArray after adding 1.

I also noticed you are using Index as key. This is wrong practice as key should be always unique. You can append some string with it to make it unique.

like below:

<React.Fragment key={step-${idx}}>

CodePudding user response：

Here you go, you'll just have to change the initialisation of methodArray to equal 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;

CodePudding user response：

You need to bind the array to the component state. You could build your own hook handling this for you.

Here's a basic exemple:

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>
}