CODEWITHSUNDEEP
reactjs
Arunya
Arunya

Reputation: 291

how to change value of an object using reactjs

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?

Upvotes: 0

Views: 217

Answers (1)

Muhammad Asad
Muhammad Asad

Reputation: 312

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>
  }
})

Upvotes: 2

Related Questions