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-11 10:40:56Z

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, 2019 at 10:40

answered Dec 11, 2019 at 10:09

Diogo Peres

1,3922 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Lalas M Over a year ago

Thanks for the quick response. Using this, all the visited values changes from false to true instead of only data[i].visted : true ...

Diogo Peres Over a year ago

Do you want only one to be true?

Lalas M Over a year ago

Yes only the specific value of array that is with the index passed to the click event

Lalas M Over a year ago

After the edit using map function also it updates all the visited value to true. Let me refactor it somehow .. thanks

Diogo Peres Over a year ago

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

|

akhtarvahid · Accepted Answer · 2019-12-11 10:22:43Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related