How to edit object and pass new one to array? ReactJS, Material UI

Question

I need to edit array of objects and show new value to the view. I'm pretty new in ReactJS, so I tried do it like below, but after edit I lose everything except for the one I have edited. Can you give me info if my way to do this is correct? Any advices how to do this?

Parent component:

 constructor(props) {
  super(props);
  this.state = { data: [], open: false, openEdit: false, openAlert:false, priority:'', nameTask:'', deadline:new Date() };
}
  // Edit row from table
handleEdit = e => {    
 const index = e.currentTarget.getAttribute('index');
 let foundObject = this.state.data[index];

 let nameTaskNew = foundObject.nameTask;
 let priorityNew = foundObject.priority;
 let deadlineNew = foundObject.deadline;
 this.setState({openEdit: true, nameTask: nameTaskNew, priority: priorityNew, deadline: deadlineNew });
}

handleSubmitEdit = (e) => {
 const err = this.validate();
  if (!err) {
   this.setState({
     // Set new data array
     data: [this.state],
     // Clear form
     openEdit: false,
     nameTask: "",
     nameTaskError: "",
     priority: "Low",
     deadline: new Date()
   });}}

render() {
 const actions = [
 <FlatButton label="Edit" primary={true} keyboardFocused={true} onClick={e => this.handleSubmitEdit(e)} />];

return (
    {/* Edit form */}
    <form>
    <Dialog title="Edit your Task" open={this.state.openEdit} actions={actions}>
      <TextField floatingLabelText="Task" value={this.state.nameTask} errorText={this.state.nameTaskError}
      onChange={e => this.handleTextFieldChange(e)}  
      onKeyPress={this.handleKeyPress} />
      <DatePicker floatingLabelText="Deadline" value={this.state.deadline} onChange={this.handleChangeDate} />
      <SelectField floatingLabelText="Priority" value={this.state.priority} onChange={this.handleChangeSelectField}>
          <MenuItem value="High" primaryText="High" />
          <MenuItem value="Medium" primaryText="Medium" />
          <MenuItem value="Low" primaryText="Low" />
      </SelectField>
    </Dialog>  
  </form>
);}}

export default Home;

So to be clear you have an array of objects stored in this.state.data and you want to edit just one of those objects and keep the rest the same? — Rodius
– Rodius, Commented Jan 5, 2018 at 10:19
Exactly. I have feature to add new items to the table and I'm working on edit one of these item. — Italik
– Italik, Commented Jan 5, 2018 at 10:24

Clive Ciappara · Accepted Answer · 2018-01-05 14:02:18Z

1

I suggest you check this post. I believe it's what you're looking for: https://medium.com/@thejasonfile/using-the-spread-operator-in-react-setstate-c8a14fc51be1

answered Jan 5, 2018 at 14:02

Clive Ciappara

5585 silver badges11 bronze badges

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

Comments

simbathesailor · Accepted Answer · 2018-01-05 10:40:28Z

0

I think you are missing spreading the full state.

handleSubmitEdit = (e) => {
 const err = this.validate();
  if (!err) {
   this.setState({
     // Set new data array
     ...this.state,
     // Clear form
     openEdit: false,
     nameTask: "",
     nameTaskError: "",
     priority: "Low",
     deadline: new Date()
   });}}

This may help

answered Jan 5, 2018 at 10:40

simbathesailor

3,6852 gold badges22 silver badges30 bronze badges

1 Comment

Italik Over a year ago

Now, there is now error in console but item doesn't edit after all.

Collectives™ on Stack Overflow

How to edit object and pass new one to array? ReactJS, Material UI

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related