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

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

• javascript
• reactjs
• jsx

Share Improve this question Follow asked Dec 10, 2019 at 14:39 Lalas MLalas M 1,17411 gold badge1616 silver badges3232 bronze badges 1

• 1 visitmyArray.map((visitedArray, index) => { <- this is bad. visitedArray is an element of an array, not an array. – pbialy Commented Dec 10, 2019 at 14:45

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

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

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 ponent 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 ponent'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.

after let visitmyArray and before return( add:

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

and the in Button:

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