CODEWITHSUNDEEP
javascriptreactjsjsx
Lalas M
Lalas M

Reputation: 1174

Change the value of object in an array on click event

How can I change the value of an array from inside a map function using button onClick event. In the following example I defined and array name visitMyArray that has three objects and initially the value of visited key is set as false. Using map function I render the all the location inside a paragraph tag. There will be a button rendered for each paragraph. Is it possible to change the value of the visited from false to true if possible how can I do it.

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

class VisitComponent extends React.Component {

render(){
    let visitmyArray = [
        {
            location:"Indiana",
            visited:false
        },
        {
            location:"Illinoi",
            visited:false
        },
        {
            location:"Ohio",
            visited:false
        }
    ]
    return(
      <div>
        {visitmyArray.map((visitedArray, index) => {
             <div key={index}>
                <p>{visitedArray.location}</p>
                <Button onClick={"Change the visited value from 'false' to 'true' for this object value"}>Continue</Button>
             </div>
            )})}
      </div>
   }
}

export default VisitComponent

Upvotes: 3

Views: 5630

Answers (4)

tcanusso
tcanusso

Reputation: 192

You can define onClick as:

onClick = {() => {
    visitmyArray[index].visited = true
  }
}

I don't know your use case, but you shouldn't be defining the 'visitmyArray' in the render function. Every time the component renders, it will be redefined, so you should define it elsewhere. For instance,

let visitmyArray = [
  {
    location:"Indiana",
    visited:false
  },
  {
    location:"Illinoi",
    visited:false
  },
  {
    location:"Ohio",
    visited:false
  }
]

class VisitComponent extends React.Component {
  render() {...}
}

If you want to listen to changes made to the array, you should define it as part of the component's state, like this:

let visitmyArray = [
  {
    location:"Indiana",
    visited:false
  },
  {
    location:"Illinoi",
    visited:false
  },
  {
    location:"Ohio",
    visited:false
  }
]

class VisitComponent extends React.Component {
  constructor() {
    super()
    this.state = {
      array: [...]
    }
  }

  render() {...}
}

You should change the onClick to use the state's array to create a new array, and then use setState to actually modify it.

Upvotes: 0

TKoL
TKoL

Reputation: 13902

Using state, it might look something like this:

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

class VisitComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            visitmyArray: [
                {
                    location:"Indiana",
                    visited:false
                },
                {
                    location:"Illinoi",
                    visited:false
                },
                {
                    location:"Ohio",
                    visited:false
                }
            ]
        };

        this.toggleVisited = this.toggleVisited.bind(this);
    }

    toggleVisited(location) {
        return ev => {
            var locations = this.state.visitmyArray.slice(0);
            var loc = locations.find(a => a.location === location);
            loc.visited = !loc.visited;
            this.setState({visitmyArray:locations})
        }
    }

    render(){
        let {visitmyArray} = this.state;
        return(
            <div>
                {visitmyArray.map((visitedArray, index) => (
                    <div key={index}>
                        <p>{visitedArray.location}</p>
                        <button className={visitedArray.visited ? "visited" : ""} onClick={this.toggleVisited(visitedArray.location)}>Continue</button>
                    </div>
                ))}
            </div>
        )
    }
}


export default VisitComponent

Upvotes: 1

pbialy
pbialy

Reputation: 1083

after let visitmyArray and before return( add:

markLocationAsVisited = (locationIndex) => {
  this.visitmyArray[locationIndex].visited = true
}

and the in Button:

<Button onClick={() => markLocationAsVisited(index)}>

Upvotes: -1

Rhaidzsal Ali
Rhaidzsal Ali

Reputation: 168

You can set the visited property to true for each item on the map. Your onClick now would be

onClick={() => {visitedArray.visited = true}}

Upvotes: 3

Related Questions