Keep state when refreshing

Viewed 58

I have developped a React Dapp where I can add on a table data inputted by the user. But each time that I refresh the page the data are gone, I would like to know if it's possible to keep the data in the table. If yes, how can I do it please ?

Here is the code for adding inputted data inside a table:

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

    this.state = {
      username: '',
      password: '',
      items: []
    }
  };

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

    let items = [...this.state.items];

    items.push({
      username: this.state.username,
      password: this.state.password
    });

    this.setState({
      items,
      username: '',
      password: ''
    });
  };

  handleInputChange = (e) => {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

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

  render() {
    return ( <
      div className = "App" >
      <
      Form handleFormSubmit = {
        this.handleFormSubmit
      }
      handleInputChange = {
        this.handleInputChange
      }
      newUsername = {
        this.state.username
      }
      newPassword = {
        this.state.password
      }
      /> <
      Table items = {
        this.state.items
      }
      /> <
      /div>
    );
  }
}

class Table extends React.Component {
  render() {
    const items = this.props.items;
    return ( <
      div id = "Table" >
      <
      table >
      <
      tbody >
      <
      tr >
      <
      th > Username < /th> <
      th > Password < /th> <
      /tr> {
        items.map(item => {
          return ( <
            tr >
            <
            td > {
              item.username
            } < /td> <
            td > {
              item.password
            } < /td> <
            /tr>
          );
        })
      } <
      /tbody> <
      /table> <
      /div>
    );
  }
}

class Form extends React.Component {
  render() {
    return ( <
      div id = "Form" >
      <
      h3 > Add a new item to the table: < /h3>   <
      form onSubmit = {
        this.props.handleFormSubmit
      } >
      <
      label htmlFor = "username" >
      Username:
      <
      input id = "username"
      value = {
        this.props.newUsername
      }
      type = "text"
      name = "username"
      onChange = {
        this.props.handleInputChange
      }
      /> <
      /label> <
      label
      for = "password" >
      Password:
      <
      input id = "password"
      value = {
        this.props.newPassword
      }
      type = "password"
      name = "password"
      onChange = {
        this.props.handleInputChange
      }
      /> <
      /label> <
      button type = "submit"
      value = "Submit" > Add Item < /button> <
      /form> <
      /div>
    );
  }
}

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

I thank in advance anybody who will take the time to help me.

1 Answers

after updating the state you can save data in localstorage. And when app renders fetch the data from localstorage so that your data will be persisted in browser.

localStorage.setItem("table_data", JSON.stringify(data_array));
const data = JSON.parse(localStorage.getItem("table_data")));
console.log(data)
Related