How to change an object value of a state array by using a specific array index

Question

I'm trying to change the value of an object key from a state array using setState. The change should be in such a way that only a specific value of object should be changed from the array of index i. This index is passed as follows

import React from "react";
import {Button} from 'react-bootstrap';

class StepComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                { 
                    step: "Step1",
                    visited: false
                },
                { 
                    step: "Step2",
                    visited: false
                },
                { 
                    step: "Step3",
                    visited: false
                }
            ]
        };
    }
    nextStep(i) {

        //Change the visited value of object from data[i] array from false to true
        //Something like below

        this.setState({
            data[i]:visited to true
        })
    }

    render(){
        let visitSteps = this.state.data;
        return(
            <div>
                {visitSteps.map((visitedStep, index) => (
                    <div key={index}>
                        <p>{visitedStep.step}</p>
                        <Button onClick={() => this.nextStep(i)}>Continue</Button>
                    </div>
                ))}
            </div>
        )
    }
}

export default StepComponent

As per the example given aboove on each onClick event the the value of that particular object value of visited is changed from false to true

Answer 1

You can create a variable with the array equals to your data, change the index passed as input and then call a set state passing the new array.

    nextStep(i) {
        let visitesList = [...this.state.data];
        visitesList[i].visited = true;

        this.setState({
            data: visitesList
        })
    }

If you just want one step to be true at a time you can use a map function

  nextStep(i) {
    this.setState({
      data: this.state.data.map((e, index) => {
        e.visited = i === index;
        return e;
      })
    });
  }

Also, when calling the nextStep on the Button, call it by using nextStep(index)

Answer 2

Change specific object property of array.

class App extends React.Component {
      state = {
        data:[
                { 
                    step: "Step1",
                    visited: false
                },
                { 
                    step: "Step2",
                    visited: false
                },
                { 
                    step: "Step3",
                    visited: false
                }
            ]
  };
  handleClick = item => {
    const { data } = this.state;
    let obj = data.find(a => a.step === item.step);
    obj.visited = true;
    let filtered = data.filter(a => a.step !== item.step);
    this.setState({ data: [obj, ...filtered] });
  };
  render() {
  console.log(this.state.data);
    return (
      <div>
        {this.state.data.map(a => (
          <button key={a.step} style={{ color: a.visited ? "red" : "" }} onClick={() => this.handleClick(a)}>
            {a.step}
          </button>
        ))}
      </div>
    );
  }
}

Live Demo