Loop over array with map() function onClick (ReactJS)

Question

I want to create a wizard that changes content when the user clicks a "next" button.

I'm currently trying to use the .map function, it works but how can I adjust my code to loop over each step in my array onClick?

Currently, my code just displays 3 separate inputs with all of the steps in the array, what I want to do is iterate over each step onClick.

Here is an example of my code:

Array:

const wizardControls = {
    steps: [
        {
            step: 1,
            name: 'name1',
            type: 'text',
            placeholder: 'name1',
        },
        {
            step: 2,
            name: 'name2',
            type: 'text',
            placeholder: 'name2',
        },
        {
            step: 3,
            name: 'name3',
            type: 'text',
            placeholder: 'name3',
        },
    ],
};

JSX using map() function:

    {steps.map((step, index) => (
        <div key={index}>
            <input
                value={value}
                name={step.name}
                type={step.type}
                placeholder={step.placeholder}
                onChange={onChange}
            />
        </div>
    ))}

I'm thinking the button will need a handler function to loop over the index, however, I'm unsure how to do this with the map() function.

I'm open to a better approach if the map() function isn't the best route.

question from:https://stackoverflow.com/questions/65836498/loop-over-array-with-map-function-onclick-reactjs

Answer 1

If you want to show a step at a time, don't use Array.map() to render all of them. Use useState to hold the current index (step), and take the current item from the steps array by the index. To jump to the next step, increment the index by 1.

const { useState } = React;

const Demo = ({ steps }) => {
  const [index, setIndex] = useState(0);
  const [values, setValue] = useState([]);
  
  const next = () => 
    setIndex(step => step < steps.length -1 ? step + 1 : step);
  
  const onChange = e => {
    const val = e.target.value;
    
    setValue(v => {
      const state = [...v];
      
      state[index] = val;
      
      return state;
    })
  };
  
  const step = steps[index];

  return (
    <div>
        <input
            value={values[index] || ''}
            name={step.name}
            type={step.type}
            placeholder={step.placeholder}
            onChange={onChange}
        />
        
        <button onClick={next}>Next</button>
    </div>
  );
};

const wizardControls = {"steps":[{"step":1,"name":"name1","type":"text","placeholder":"name1"},{"step":2,"name":"name2","type":"text","placeholder":"name2"},{"step":3,"name":"name3","type":"text","placeholder":"name3"}]};

ReactDOM.render(
  <Demo steps={wizardControls.steps} />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>