setState new data into array

Question

This maybe a silly question, so I apologize in advance.

I have a small array where I iterate it with this.state.data.map() and pass the data into inputs. I would like to edit the data in each input and save the new data. Since it's an array, how can I save this new data into the array? Which is the best/smartest practice for this?

A live example here

Here is an example below:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: ["Saab", "Volvo", "BMW"],
      editMode: false
    };
  }

  handleInput = e => {
    let value = e.target.value;
    let name = e.target.name;
    console.log(name);
    console.log(value);

    this.setState(prevState => ({
      data: {
        ...prevState.data,
        [name]: value
      }
    }));
  };

  handleFormSubmit = e => {
    e.preventDefault();

    const { data } = this.state;
    console.log(data);
  };

  render() {
    return (
      <div className="App">
        <div>
          {!this.state.editMode ? (
            <button onClick={() => this.setState({ editMode: true })}>
              edit
            </button>
          ) : (
            <div>
              <button onClick={() => this.setState({ editMode: false })}>
                cancel
              </button>
              <button onClick={this.handleFormSubmit}>submit</button>
            </div>
          )}
        </div>

        <React.Fragment>
          {this.state.data.map((rule, index) =>
            this.state.editMode ? (
              <form onSubmit={this.handleFormSubmit}>
                <input
                  onChange={this.handleInput}
                  type="text"
                  placeholder="Cars"
                  name={rule}
                  defaultValue={rule}
                  key={index}
                />
              </form>
            ) : (
              <p key={rule}> - {rule} </p>
            )
          )}
        </React.Fragment>
      </div>
    );
  }
}

Thank you! :)

Is values are unique in state.data? Else every identical value will be replaced with new one. — Sameer Reza Khan
– Sameer Reza Khan, Commented Jan 27, 2019 at 13:58

Ana Liza Pandac · Accepted Answer · 2019-01-27 13:59:38Z

4

One solution is to pass the index of the currently changed item to the event handler to ensure that you are modifying the correct item on the list.

To do this, change your handleInput to accept both the event object and index of the currently changed item.

handleInput = (e, index) => {
  const { data = [] } = this.state;
  let value = e.target.value;
  data[index] = value;
  this.setState({ data: data });
};

So you have to changed your input onChange handler to this.

onChange={(event) => this.handleInput(event, index)}

See working example

answered Jan 27, 2019 at 13:59

Ana Liza Pandac

4,8912 gold badges26 silver badges37 bronze badges

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

3 Comments

RCohen Over a year ago

Your working example is not working :P. @Ana Liza Pandac

Ana Liza Pandac Over a year ago

@RChohen I forgot to save it.:D

RCohen Over a year ago

ahaha it's okay :)

Gaurav Saraswat · Accepted Answer · 2019-01-27 14:08:13Z

0

First problem is that, your data is an array while in handleInput you are assigning it to the object.

Second, coming to your problem, I am assuming order of the array is also important. You should set new value on onchange at the same index the prev. value was.

The following code should work:

handleInput = (value, index) => {
  this.setState(prevState => {
    const newData = prevState.data;
    newData[index] = value;
    return {
        data: newData
    };
  });
};

And input element be like:

<input
  onChange={(e) => {this.handleInput(e.target.value, index)}
  type="text"
  placeholder="Cars"
  value={rule}
  key={index}
/>

edited Jan 27, 2019 at 14:08

answered Jan 27, 2019 at 14:02

Gaurav Saraswat

1,3838 silver badges11 bronze badges

Comments

elraphty · Accepted Answer · 2019-01-27 14:08:17Z

0

Do this

handleInput = e => {
  let value = e.target.value;
  let name = [e.target.name];
  console.log(name);
  console.log(value);

   let { data } = this.state;
   data[name]  = value;

    this.setState({data: data});
 };

answered Jan 27, 2019 at 14:08

elraphty

6306 silver badges14 bronze badges

Collectives™ on Stack Overflow

setState new data into array

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related