Deletion using ReactJS

Mar 14, 2016

Tonight, I will start on enabling deletion of links in my ReactJS single-page app. It should be straightforward, but with new tech, you just never know.

Client-side first

On the client-side, I need add a small form that will submit the DELETE request to the server using the given ID. The most logical place for the markup is on the component, but I suspect that I’ll need to pass the event up to the root component in order to keep the one-way data flow and easy re-rendering.

Markup

Firstly, I am going to amend the Link component to add the delete button.

<divclassName={"cardcard-block"}>

<h4className="card-title">

<atarget="_blank"href={this.props.url}>{this.props.title}</a>

<formonSubmit={this.handleDelete}>

<inputtype="submit"value="X"/>

</form>

</h4>

<pclassName="card-text">

Created by {this.props.client} at {this.props.created_at}

</p>

</div>

Following the pattern laid out for submitting new links, I added the simplest of forms to the title part of the link markup. The onSubmit handler is a local function.

The function, much like for link creation will just pass its specific local state up to the root component that will take care of the actual request to the backend.

handleDelete:function(e){

e.preventDefault();

varid=this.props.id;

this.props.onLinkDelete({id:id});

}

Event propagation…the ugly way

I am certain I’m doing things the wrong way, because in order for me to have the root component do the actual communication and state rendering, I have to pass the callback function all the way from root component down to the lowest level.

varLinkGroup=React.createClass({

// some code

return(<LinkonLinkDelete={callback}key={link.id}

id={link.id}title={link.title}

url={link.url}client={link.client}

created_at={link.created_at}/>);

// more code

});

varLinkList=React.createClass({

// some code

return(<LinkGroupdata={link_group}

onLinkDelete={callback}/>);

// more code

});

varLinkListContainer=React.createClass({

// some code

<LinkListdata={this.state.data}

onLinkDelete={this.handleLinkDelete}/>

// more code

This works, but I am sure it is not the way. I’ll have to research more.

The actual event handler

Now that I’m passing the handler into the correct spot and returning correct data, I’m going to write the simplest handler that can possibly work.

handleLinkDelete:function(data){

$.ajax({

url:this.props.url+"/"+data.id,

dataType:"json",

contentType:"application/json",

type:"DELETE",

success:function(data){

this.setState({data:data});

}.bind(this),

error:function(xhr,status,err){

console.error(this.props.url+"/"+data.id,status,err.toString());

}.bind(this)

});

}

This is just the simple, standard jQuery-based AJAX call. The server will return the updated atom that the ReactJS will use to re-render the UI.