How to save data in an array inside state in react js

Question

I have TextField and FlatButton inside the Dialog. I want to save complete task list in an array which I defined in a state.

this.state = {
  open: false,
  todos: [{ id: -1, text: "", completed: false }],
  notetext: ""
};

I am able to get text of TextField from the state. I want to save task in an array on clicking of FlatButton. I have handleCreateNote function which is attached on tap on FlatButton.

I don't know what is the way to add task in an array. Can anyone help me what is the way in the react ?

const AppBarTest = () =>
  <AppBar
    title={strings.app_name}
    iconClassNameRight="muidocs-icon-navigation-expand-more"
    style={{ backgroundColor: colors.blue_color }}
  />;

class App extends Component {
  constructor(props) {
    injectTapEventPlugin();
    super(props);
    this.state = {
      open: false,
      todos: [{ id: -1, text: "", completed: false }],
      notetext: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  handleCreateNote = () => {
    console.log(this.state.notetext);
  };

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  render() {
    return (
      <MuiThemeProvider>
        <div>
          <AppBarTest />
          <FloatingActionButton
            style={styles.fab}
            backgroundColor={colors.blue_color}
            onTouchTap={this.handleOpen}
          >
            <ContentAdd />
          </FloatingActionButton>
          <Dialog
            open={this.state.open}
            onRequestClose={this.handleClose}
            title={strings.dialog_create_note_title}
          >
            <TextField
              name="notetext"
              hintText="Note"
              style={{ width: "48%", float: "left", height: 48 }}
              defaultValue={this.state.noteVal}
              onChange={this.handleChange}
            />

            <div
              style={{
                width: "4%",
                height: "48",
                backgroundColor: "red",
                float: "left",
                visibility: "hidden"
              }}
            />

            <FlatButton
              label={strings.create_note}
              style={{ width: "48%", height: 48, float: "left" }}
              onTouchTap={this.handleCreateNote}
            />
          </Dialog>

        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Mayank Shukla · Accepted Answer · 2017-06-13 11:22:59Z

7

First create a copy of existing state array, then use array.push to add a new data, then use setState to update the state array value.

Like this:

handleCreateNote = () => {
    let todos = [...this.state.todos];   //creating the copy

    //adding new data
    todos.push({
        id: /*unique id*/,
        text: this.state.notetext,
        completed: false
    });

    //updating the state value
    this.setState({todos});
};

Check this answer for details about "..." --> What do these three dots in React do?

MDN: Spread Operator

Update:

Instead of spread operator you can also use slice(), that will also return a new array, the key point is we need to create a copy of state array (before doing any change) by using any method.

Check this snippet:

let a = [{key: 1}, {key: 2}];

let b = [...a];

console.log('b', b);

edited Jun 13, 2017 at 11:22

answered Jun 13, 2017 at 11:14

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

7 Comments

N Sharma Over a year ago

What . means here [...this.state.todos]; ?

Inacio Schweller Over a year ago

It's the destructuring assignment. Read more here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

ArneHugo Over a year ago

Actually it is spread syntax, which can be thought of as the opposite of destructuring assigment.

N Sharma Over a year ago

@ArneHugo Do you mean to convert props into an object ?

ArneHugo Over a year ago

@Williams It can be used for multiple things. In this case, it's used to take every item in the array that this.state.todos points to, and add them to a new array. This way we avoid mutating the original array (like push does), to avoid confusion and reduce probability of bugs.

|

Mayank Shukla · Accepted Answer · 2017-06-13 11:30:23Z

1

you can use concat to create a new array:

this.setState({
    todos: [].Concat(this.state.todos, {id, text,  complete})
})

edited Jun 13, 2017 at 11:30

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

answered Jun 13, 2017 at 11:23

xdaoo

111 bronze badge

Collectives™ on Stack Overflow

How to save data in an array inside state in react js

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related