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

Diogo Peres · Accepted Answer · 2019-12-11T10:40:56.410

3

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)

edited Dec 11 '19 at 10:40

answered Dec 11 '19 at 10:09

Diogo Peres

1,302
1
11
20

Thanks for the quick response. Using this, all the visited values changes from false to true instead of only data[i].visted : true ... – Lalas M Dec 11 '19 at 10:13
Do you want only one to be true? – Diogo Peres Dec 11 '19 at 10:14
Yes only the specific value of array that is with the index passed to the click event – Lalas M Dec 11 '19 at 10:21
After the edit using map function also it updates all the visited value to true. Let me refactor it somehow .. thanks – Lalas M Dec 11 '19 at 10:34
Sorry, my fault, I was mapping only the boolean value, I've fixed it. You will also need to change the function call on the button to pass the index instead of `i` that doens't exist – Diogo Peres Dec 11 '19 at 10:42
Great, glad it helped! :) Good luck for your project. – Diogo Peres Dec 11 '19 at 10:44

akhtarvahid · Answer 2 · 2019-12-11T10:22:43.167

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

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

2 Answers2