CODEWITHSUNDEEP
javascriptreactjsreduxreact-routerreact-redux
user944513
user944513

Reputation: 12729

how to delete item from list using delete button in react?

I am generating a dynamic list using add button .I am able to generate the dynamic list .But there is delete button also present in each li.I want to delete the item when delete button is pressed .I make a action as well redux.Firstly I don''t know how to bind click event on dynamic generated list.I am getting error when user press delete button

here is my code https://plnkr.co/edit/JEG6o4JCBIQWAt2A4S3r?p=preview // Code goes here

const { createStore, bindActionCreators, applyMiddleware,combineReducers } = Redux;
const { Provider, connect } = ReactRedux;
const thunk = window.ReduxThunk.default;


const first_redux =function(state =[] ,action){
  switch (action.type){
    case 'ADD_ITEM':
     return [
        ...state,
        action.payload
      ];
      case 'DELETE_ITEM':
      var index = state.indexOf(action.payload);
     return state.slice(index,1);
    default :
    return state

  }
}

const actions ={
 addItem :function(item){
  return {
    type :"ADD_ITEM",
    payload :item
  } 
 } ,
 deleteItem :function(item){
  return {
    type :"DELETE_ITEM",
    payload :item
  } 
 } 

}
var combindReducer = combineReducers({
  item:first_redux
})

const store = createStore(combindReducer);

class First extends React.Component {
  constructor (props){
    super(props);
    this.state = {
      names :[],
      username :''
    }
   this.changeEv =this.changeEv.bind(this);
   this.addName =this.addName.bind(this);
   this.handle =this.handle.bind(this);

  }
  changeEv(e){
    this.setState({
      username : e.target.value
    })
  }
  addName(){
    if(this.state.username !== ''){
    this.props.add(this.state.username)
     this.setState({
      username : ''
    })
    }
  }
  handle(){
    alert('---')
  }

  render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    var listItems = this.props.names.map(function(d, idx){
      return (<li key={idx}><span>{d}</span><button onClick={this.handle}>delete</button></li>)
    })
    return (
      <div>
      <input type="text" onChange ={this.changeEv} value={this.state.username}/>
      <button onClick={this.addName}>add</button>
      {listItems}
      </div>
    );
  }
} 

function mapStateToProps(state){
  console.log('=================');
  console.log(state);
  return {
       names: state.item,

  };
    console.log(this.state);

}

function mapDispatchToProps(dispatch){
  return {
    add:bindActionCreators(actions.addItem,dispatch)
  }
}
const Appcontainer =connect(mapStateToProps,mapDispatchToProps)(First)

ReactDOM.render(
  <Provider store ={store}>
    <Appcontainer/>
    </Provider>
  ,document.getElementById('root'));

Upvotes: 0

Views: 3477

Answers (1)

Swapnil
Swapnil

Reputation: 2603

The Problem:

You get an error in the delete button because the this you are trying to access inside the this.props.names.map is not the component's this.

Solution:

var listItems = this.props.names.map((d, idx) => {
  return (<li key={idx}><span>{d}</span><button onClick={this.handle}>delete</button></li>)
})

Since you are using ES6, you can use arrow functions which provide lexical scoping. I have updated your code. Check it out here

Upvotes: 1

Related Questions