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

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.

Answer 1

One way you could do this is by slicing by which step you're on (based on index).
Here's an example of what that might look like with your code.
const [step, setStep] = useState(1)
...
steps.slice(step - 1, step).map((step, index) => (
...
))
See a working example here: https://codesandbox.io/s/pensive-northcutt-el9w6

Answer 2

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>