title: How to edit local storage values react?
body: <p>I have two components Display.jsx and DisplayList.jsx. Components work together to display values from local storage. The problem is with DisplayList.JSX handleEdit() method slicing.</p>
  
  <p><a href="https://github.com/ArnasDickus/enigma-assignment" rel="nofollow noreferrer">Github project</a></p>
  
  <p>My thoughts:</p>
  
  <p>I asked on this forum how to delete local storage value and got this answer without explanation: <a href="https://stackoverflow.com/questions/54809828/how-to-delete-selected-element-react/54810825#54810825">stack overflow question</a></p>
  
  <pre><code>data = [
     ...data.slice(0, index),
     ...data.slice(index + 1)
   ];
  </code></pre>
  
  <p>It works but now I need to do similar slicing to edit and replace old storage value with new one. But I have no idea how to do it.</p>
  
  <p>Summarize: In DisplayList.jsx In method handleEdit() need to take value from local storage and overwrite with this.state email and this.state password values.Bonus if somebody could explain the process.</p>
  
  <p>Display.jsx</p>
  
  <pre><code>import React, { Component } from 'react'
  import {DisplayList} from './DisplayList';
  
  
  class Display extends Component {
    constructor(props){
      let data = JSON.parse(localStorage.getItem('data'));
      super(props)
      this.state = {
        data: data,
    }
  
    // Methods
    this.displayValues = this.displayValues.bind(this);
    }
  
    displayValues(){
  
     return this.state.data.map((data1, index) =&gt;
      &lt;DisplayList
        key = {index}
        email = {data1.email}
        password = {data1.password}
        updateList = {this.updateList}
         /&gt; 
      )
  
    }
    // This is the method that will be called from the child component.
    updateList = (data) =&gt; {
      this.setState({
        data
      });
    }
    render() {
      return (
        &lt;ul className="list-group"&gt;
          {this.displayValues()}
        &lt;/ul&gt;
      )
    }
  }
  
  export default Display;
  </code></pre>
  
  <p>DisplayList.jsx</p>
  
  <pre><code>import React, { Component } from 'react'
  import {Button, Modal, Form} from 'react-bootstrap';
  
  
  export class DisplayList extends Component {
  
      constructor(props){
          super(props)
          this.state = {
              email: '',
              password: '',
              show: false,
          };
  
          // Methods
          this.handleDelete = this.handleDelete.bind(this);
          this.onChange = this.onChange.bind(this);
          // Edit Modal
          this.handleShow = this.handleShow.bind(this);
          this.handleClose = this.handleClose.bind(this);
          this.handleEdit = this.handleEdit.bind(this);
      }
  
      onChange(event){
          this.setState({
              [event.target.name]: event.target.value
          })
      };
      handleClose(){
          this.setState({show: false});
      }
      handleShow(){
          this.setState({show: true});
      }
      handleEdit(event){
          event.preventDefault();
          this.setState({show: false});
          let data = JSON.parse(localStorage.getItem('data'));
  
          for (let index = 0; index &lt; data.length; index++) {
            if( this.props.email === data[index].email &amp;&amp;
                this.props.password === data[index].password){
          }
        }
            localStorage.setItem('data', JSON.stringify(data));
            this.props.updateList(data);
      }
      handleDelete(){
          let data = JSON.parse(localStorage.getItem('data'));
          for (let index = 0; index &lt; data.length; index++) {
              if(this.props.email === data[index].email &amp;&amp;
                  this.props.password === data[index].password){
  
                  data = [
                    ...data.slice(0, index),
                    ...data.slice(index + 1)
                  ];
  
              }
          }
          localStorage.setItem('data', JSON.stringify(data));
          this.props.updateList(data);
      }
  
  
    render() {
      return (
      &lt;div className = "mt-4"&gt;
          &lt;li className="list-group-item text-justify"&gt;
              Email: {this.props.email} 
              &lt;br /&gt; 
              Password: {this.props.password}
              &lt;br /&gt; 
              &lt;Button onClick = {this.handleShow} variant = "info mr-4 mt-1"&gt;Edit&lt;/Button&gt;
              &lt;Button onClick = {this.handleDelete} variant = "danger mt-1"&gt;Delete&lt;/Button&gt;
          &lt;/li&gt;
          &lt;Modal show={this.state.show} onHide={this.handleClose}&gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;Edit Form&lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body&gt;
              &lt;Form&gt;
                  &lt;Form.Group controlId="formBasicEmail"&gt;
                  &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
                  &lt;Form.Control 
                  autoComplete="email" required
                  name = "email"
                  type="email" 
                  placeholder="Enter email"
                  value = {this.state.email}
                  onChange = {event =&gt; this.onChange(event)}
                  /&gt;
                  &lt;/Form.Group&gt;
                  &lt;Form.Group controlId="formBasicPassword"&gt;
                  &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
                  &lt;Form.Control 
                  autoComplete="email" required
                  name = "password"
                  type="password" 
                  placeholder="Password"
                  value = {this.state.password}
                  onChange = {event =&gt; this.onChange(event)}
                  /&gt;
                  &lt;/Form.Group&gt;
            &lt;/Form&gt;
            &lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;Button variant="secondary" onClick={this.handleClose}&gt;
                Close
              &lt;/Button&gt;
              &lt;Button variant="primary" onClick={this.handleEdit}&gt;
                Save Changes
              &lt;/Button&gt;
            &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
      &lt;/div&gt;
      )
    }
  }
  </code></pre>