how to change value of an object using reactjs

Question

My objective is to change the value of an object and pass the modified object.

Here is the object:

{
  id: '12497wewrf5144',
  name: 'ABC',
  isVisible: 'false'
}

Here is the code:

class Demo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      demo: []
    }
  }

  componentDidMount() {
    axios
      .get('/api/random')
      .then(res => {
        this.setState({ demo: res.data})
      })
      .catch(error => {
        console.log(error)
      })
  }
  render() {
    return (
      <div>
{this.state.demo.map((user)=>
        <h1>{user.name}</h1>
        <input type="checkbox" value={user.value} />
)}
      </div>
    )
  }
}

export default Demo

I don't know what to write in onchange method for checkbox to only change the value within the object.

Note: value is string isVisible (we need to change value as boolean)

Can anyone help me in this query?

Does it make sense defining demo in the constructor as an empty object when it looks like the fetched data using Axios is an Array?, I think It should be defined as an empty array e.g: this.state = {demo: [] } — Irvin Sandoval
– Irvin Sandoval, Commented Aug 26, 2020 at 5:37

Muhammad Asad · Accepted Answer · 2020-08-26 05:31:46Z

2

In order to change a certain key of an object you can use the following

this.setState({
  ...this.state,
  demo: {
    ...this.state.demo,
    isVisible: <NEW VALUE>
  }
})

edited Aug 26, 2020 at 5:31

answered Aug 26, 2020 at 5:26

Muhammad Asad

3122 silver badges12 bronze badges

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

4 Comments

Phobos Over a year ago

It is important to note that when using the spread operator you do not have to define each and every property - only the properties that you want to update.

Irvin Sandoval Over a year ago

It looks like demo is an array in the end when fetching is done

dalmo Over a year ago

Yeah, looks like he's updating each user in the array.

Muhammad Asad Over a year ago

Yes, if its in an array then he might need to update the value at that specific index, I just gave him an overview how the state can be updated

Collectives™ on Stack Overflow

how to change value of an object using reactjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related