Change attribute of an object array in the state in the application

Question

Change attribute of an object array in the state in the application

Asked 6 years, 2 months ago

Viewed 2,505 times

1

to try to make an attribute of one of the objects in an array of objects switch between true and false follows code:

Initial state:

constructor(props) {
    super(props)

    this.state = {
        post: [{
            nome: '',
            conteudo: '',
            comment: false
        }]
    }
    this.handleClickComment = this.handleClickComment.bind(this)

}

Method that changes the comment attribute for each object in the array (fixed):

handleClickComment(postagem) {
    postagem.comment = !postagem.comment
    let i = postagem.id -1
    this.setState({...this.state.post[this.state.post[i] = postagem]})
}

This method is called in an onClick event, and takes as parameter the object in question as it was mapped in another component, but whenever the event the comment attribute simply does not change. Would someone tell me what’s wrong?

Edit

People managed to solve I will update the code that worked perfect, updated the attribute value without changing the application status directly, always instantiates a new array with the new parameters. Thank you all for your help.

problem line: let comment = this.state.comment ? false : true, because $this.state.post has an array of information, agree? ai ta error! shouldn’t be let comment = this.state.post[indice].comment ? false : true??? the third line also assignment does not seem correct.

– novic

2018/07/17 at 14:14
this.state.post.foreach(item => { item.comment = ! item.comment; })

– Lucas Brogni

2018/07/17 at 14:42
@Lucasbrogni in this case the comment attribute would be changed on all objects in the array, no?

– Yago Santos

2018/07/17 at 19:19
@Yagosantos yes, in that case he would always change the value, if he is do he would pass to true and vice versa.

– Lucas Brogni

2018/07/17 at 20:05
1

@Lucasbrogni yes I know, but in the case I wanted to change only the value of the event in which occurred onClick...but I already understood the logic vlw

– Yago Santos

2018/07/17 at 22:54

1 answer

Browser other questions tagged array web-application react boolean objects

You are not signed in. Login or sign up in order to post.

by novic • **35,673** points · Answer 1 · 2018-07-17T16:33:18+00:00

I decided to make a minimal example to change a list:

class ListApp extends React.Component {
  constructor(props) {
      super(props);
  }
  render() {
      return (
        <div key={this.props.indice}>{this.props.nome} <button type="button" onClick={this.props.click}>Comment - {this.props.comment ? "Verdadeiro": "Falso"}</button></div>
      )
  }
}
class App extends React.Component {
    constructor() {
      super();
      this.state = {
        post: [{
          nome: 'n1',
          conteudo: '',
          comment: false
        },
        {
          nome: 'n2',
          conteudo: '',
          comment: true
        }]
      }            
    }
    
    render() {
      return (<div>{     
          this.state.post.map((m,i) => <ListApp key={i} indice={i} comment={m.comment} nome={m.nome} click={this.handleClickComment.bind(this, i, m)} />)
      }</div>)
    }     
    
    handleClickComment(index, model) {
        model.comment = !model.comment;
        const { post } = this.state;
        post[index] = model;
        this.setState({post});        
    }
}

ReactDOM.render(<App/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js" crossorigin></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"></div>