0

I have two components Display.jsx and DisplayList.jsx. Components work together to display values from local storage. The problem is with DisplayList.JSX handleDelete() method loop.

I don't get it why it deletes first element instead of selected element? And how to fix that?

Github

Display.jsx

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) =>
    <DisplayList
      key = {index}
      email = {data1.email}
      password = {data1.password}
      updateList = {this.updateList}
       /> 
    )
  }
  // This is the method that will be called from the child component.
  updateList = (data) => {
    this.setState({
      data
    });
  }
  render() {
    return (
      <ul className="list-group">
        {this.displayValues()}
      </ul>
    )
  }
}

export default Display;

DisplayList.jsx

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);
    }

    onChange(event){
        this.setState({
            [event.target.name]: event.target.value
        })
    };   
    handleDelete(){
        const data = JSON.parse(localStorage.getItem('data'));
        for (let index = 0; index < data.length; index++) {
            if(this.props.email === data[index].email &&
                this.props.password === data[index].password){
                  console.log(this.props.email);
                  console.log(data[index]);
                data.splice(data[index], 1);
            }
            console.log('loop count');
        }
        localStorage.setItem('data', JSON.stringify(data));
        this.props.updateList(data);
    }


  render() {
    return (
    <div className = "mt-4">
        <li className="list-group-item text-justify">
            Email: {this.props.email} 
            <br /> 
            Password: {this.props.password}
            <br /> 
            <Button onClick = {this.handleShow} variant = "info mr-4 mt-1">Edit</Button>
            <Button onClick = {this.handleDelete} variant = "danger mt-1">Delete</Button>
        </li>
    </div>
    )
  }
}
Arnas Dičkus
  • 522
  • 1
  • 10
  • 26
  • instead of `for` loop with `if` why not use filter and return the new array?`array.prototype.filter`... something like this: const newData = data.filter(credential => data.email !== this.props.email && data.password !== this.props.password) link for array filter --> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter – Anirudh Mangalvedhekar Feb 21 '19 at 14:59

2 Answers2

1

Instead of:

data.splice(data[index], 1);

Try rewriting entire array:

data = [
    ...data.slice(0, index),
    ...data.slice(index + 1)
];
Mike Doe
  • 16,349
  • 11
  • 65
  • 88
  • This would throw an error with the existing code. Cause data is a `const`, isn't it? – Subhendu Kundu Feb 21 '19 at 15:01
  • It works I been stuck for over an hour. Thanks.Can you also help about editing localstorage. How it should I write it if I want to edit specific value? https://github.com/ArnasDickus/enigma-assignment/blob/master/src/components/DisplayList.jsx – Arnas Dičkus Feb 21 '19 at 15:02
  • 1
    @SubhenduKundu I changed datatype to let. Keeping it const wasn't necessary. – Arnas Dičkus Feb 21 '19 at 15:03
0
handleDelete(){
  const data = JSON.parse(localStorage.getItem('data'));
  const filteredData = data.filter(
      x => !(x.email === this.props.email && x.password === this.props.password)
   );
  localStorage.setItem('data', JSON.stringify(filteredData));
  this.props.updateList(filteredData);
}
Bonjov
  • 305
  • 1
  • 10