Moe-Joe Moe-Joe - 3 months ago 28
React JSX Question

React JS - How does this function work to delete JSON data?

I hope you can help.

I can't remember where I got the the snippet of code in the deleteHandler function. It deletes the relevant listdata item from the JSON array and re-renders as expected. I just don't understand what it's doing. Is it specific React syntax? Is it rudimentary stuff that I am oblivious to?

I know the state.listdata.splice(id, 1); line gets the current JSON object, but what does the arrow function do? What is being returned? I'm quite baffled by it.

Any help is much appreciated.



var AppFront = React.createClass({
getInitialState:function(){
return{
listdata: [
{"id":1,"name":"Push Repo","description":"Job No 8790","priority":"Important"},
{"id":2,"name":"Second Note","description":"Job No 823790","priority":"Important"}
]
}
},
deleteHandler: function(e,id){
this.setState(state => {
state.listdata.splice(id, 1);
return {listdata: state.listdata};
});
},
render: function(){
var listDataDOM = this.state.listdata.map((item,index) => {return (<li key={item.id}>
{item.name}
<button onClick={()=>this.deleteHandler(item.id)}>delete</button>
</li>)});
return(
<div>
<h1>To-do List</h1>
<ul>
{listDataDOM}
</ul>
</div>
);
}
});

ReactDOM.render(<AppFront />,document.getElementById("container"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>




Answer

1) About setState

setState function in React looks something like that :

setState(partialState, callback)

Where partialState may be : object , function or null.

In your particular case you use function, which returns an object of state variables.

setState(function(state){ return {some:data}  })

and with arrow func (es6) , the same will look like

setState(state=> { return {some:data}  })

in yout particular case arrow func used just for short


2) About splice

In handler, you use JS func splice() to remove element from state's array;

But it is bad practice, because it mutates the state of component.And It will cause bugs, problems and unpredictable behavior. You shouldn't mutate your state!

To avoid that you can copy your array through slice(), because slice returns new array.

      var newArray = state.listdata.slice()
      newArray.splice(index, 1);

3) About deleteHandler and data structure

deleteHandler doesnt work properly, and works only for first position.And if your data will look like that:

 listdata: [
          {"id":52,"name":"Push Repo","description":"Job No 8790","priority":"Important"},
          {"id":11,"name":"Second Note","description":"Job No 823790","priority":"Important"}
          ]

It will not work at all

For proper result , you should change deleteHandler to this:

 deleteHandler: function(e,id){
      //find index of element
      var index = this.state.listdata.findIndex(e=>e.id==id);
      //copy array
      var newAray = this.state.listdata.slice();
      //delete element by index
      newAray.splice(index, 1);
      this.setState({listdata: newAray});

  },

and button

<button onClick={e=>this.deleteHandler(e,item.id)}>delete</button>

> JSBIN example

or you can delete by index

 deleteHandler: function(e,index){
      //copy array
      var newAray = this.state.listdata.slice();
      //delete element by index
      newAray.splice(index, 1);
      this.setState({listdata: newAray});
  },
 <button onClick={e=>this.deleteHandler(e,index)}>delete</button>

> JSBIN example