How to delete list-items from the list. I created list and now i want to delete an item.

class Weekdays extends React.Component{

    render(){
                const listItem = ["sun", "mon", "tue","wed","thur","fri","sat"];
                return (
                   <ul>{ listItem.map(day => <li> {day.toString()} <button id={day.toString()}>Delete </button></li>)}</ul>
                )
            }
        }
ReactDOM.render(<Weekdays/>,document.getElementById("root"))

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

here you can use functional component for it,

function Weekdays{

  const [listItem,setListItem] = useState(["sun", "mon", "tue","wed","thur","fri","sat"])

  render(){
          
          return (
             <ul>{ listItem.map(day => <li> {day.toString()} <button id={day.toString()} onClick={setListItem(listItem.filter(e=>e!==day))}>Delete </button></li>)}</ul>
          )
      }
  }
  

componet solution would be,

class Weekdays extends React.Component{

  constructor(props) {
    super(props);
    this.state = {listItem: ["sun", "mon", "tue","wed","thur","fri","sat"]};
    this.del = this.del.bind(this)      
}

del = (day) => {
  this.setState({listItem: listItem.filter(e=>e!==day)});
}

  render(){
          
          return (
             <ul>{ this.state.listItem.map(day => <li> {day.toString()} <button id={day.toString()} onClick={this.del(day)}>Delete </button></li>)}</ul>
          )
      }
  }
  ReactDOM.render(<Weekdays/>,document.getElementById("root"))
}  

CodePudding user response：

Here is the smallest working code using React component and React.state, which may help you.

import React, { useState } from "react";

const App = () => {
  const [listItem, setListitem] = useState([
    "sun",
    "mon",
    "tue",
    "wed",
    "thur",
    "fri",
    "sat"
  ]);

  const deleteItem = (number: number) => {
    const newList = [...listItem];
    newList.splice(number, 1);
    setListitem(newList);
  };
  return (
    <ul>
      {listItem.map((day, i) => (
        <li>
          {day.toString()}
          <button id={day.toString()} onClick={() => deleteItem(i)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
};

export default App;

CodePudding user response：

You must use react state

    constructor(props) {
      super();
      this.state = {listItem: ...};
           
     this.handleClick = this.handleClick.bind(this);
     // This binding is necessary to make this work in the callback      
    }

    handleClick(e) {
        this.setState(prevState => ({
          //pop elemets from list here using e.target.value
          data: prevState.data.filter(el => el != e.target.value )
        }));
      }
    
      render() {
        return (
    <ul>{ listItem.map(day => <li> {day.toString()} <button id={day.toString()}
    **onClick={this.handleClick}**>
    Delete </button></li>)}</ul>
        );
      }

. . for more info refer documentaion and sample code for

for best practices maintain data in form of {id, value} keep id unique and then delete on id