CODEWITHSUNDEEP
reactjsecmascript-6
user11066242
user11066242

Reputation: 233

Unable to delete list item in React

I have added an input box which would print items on submit. After that, I am trying to delete items from the list by adding a delete button. But, the button isn't working. I assume I have applied wrong logic in the onDelete function. I have used the filter function to print out elements which are true. I am not sure what mistake I have done over here.

App.js:

import React, { Component } from 'react'
import Result from './Result';
import Navbar from './Navbar';
import Jumbotron from 'react-bootstrap/Navbar';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';


export default class App extends Component {
    constructor(){
    super();
      this.state={
        addedItems:[],
        emailValue:''
      }
      this.handleChange=this.handleChange.bind(this);
      this.handleSubmit=this.handleSubmit.bind(this);
      this.onDelete=this.onDelete.bind(this);
    }

     handleChange(e){
       this.setState({
         emailValue:e.target.value
       })
     }

     handleSubmit(e){
      e.preventDefault();
      let items_copy= this.state.addedItems;
      items_copy.push(this.state.emailValue)
      console.log("item copy"+items_copy)
      this.setState({
        addedItems:items_copy,
        emailValue:''
      })
      console.log(this.state.addedItems)
     }

     onDelete(id){
      console.log("deleted clicked")
      let newArray=this.state.addedItems.filter(i=>i!==this.state.addedItems.id)
      this.setState({
        addedItems:newArray
      })
     }
  render() {
    console.log("")
    return (
     <div>
          <Navbar/>
          <Jumbotron>
          <p>
            Enter the things you would like to buy.
          </p>
        </Jumbotron>

        <Form>
          <Form.Group controlId="formBasicEmail">
            <Form.Control value={this.state.emailValue} onChange={this.handleChange}type="email" placeholder="Enter email" />
          </Form.Group>
          <Button onClick={this.handleSubmit}variant="primary" type="submit">
            Submit
          </Button>

        </Form>
        {(this.state.addedItems.length>0)?
        <Result item={this.state.addedItems} onDelete={this.onDelete} />:'empty'  }     
      </div>
    )
  }
}

Result.js

 import React from 'react'
import ListGroup from 'react-bootstrap/ListGroup'
import Button from 'react-bootstrap/Button'

export default function Result(props) {
    const btnStyle={
        marginTop:-7,
        float:'right'
    };
    const {item,onDelete}=props;
    //let show=item.map(item=>item);
    console.log(item) 
    let itemShow = item.map((item, key,id) =>{
     return ( 
         <ListGroup.Item as="li" key={key}>{item}
         <Button onClick={()=>onDelete(id)}style={btnStyle}variant="danger">Delete</Button></ListGroup.Item>
        )})

    return (
        <div>
            <ListGroup as="ul">
                {itemShow}
            </ListGroup>
        </div>
    )
}

Upvotes: 1

Views: 59

Answers (2)

b.stevens.photo
b.stevens.photo

Reputation: 934

let temp = this.state.addedItems;
temp.filter(i=>i.id!==id);
this.setState({
   addedItems: temp
});

The first argument from the filter function is the current item, which I'm assuming you're storing objects so the above should work. If you want to filter by index the second argument to filter is the index,

.filter((item, index)=>{});

Upvotes: 2

Xavier Brassoud
Xavier Brassoud

Reputation: 715

Just replace this line in your OnDelete method :

newArray=this.state.addedItems.filter(i=>i!==this.state.addedItems.id)

By :

const index = this.state.addedItems.map(function(e) { return e.id; }).indexOf(id);
if (index > -1) {
   this.state.addedItems.splice(index, 1);
}

Should do the trick ?

According to the definition of splice function by Mozilla Developer.

Upvotes: -1

Related Questions