Delete Post with Sweet Alert Confirmation

If you need to align the action buttons horizontally, a wrapper div and .... <Link className="****"></Link> ... for example:

renderPosts() {
        return this.state.posts.data.map(post => <tr key={post.id}>
            <td>{ post.id }</td>
            <td>{ post.title }</td>
            <td>{ post.category.name }</td>
            <td>{ post.content }</td>
            <td>{ post.created_at }</td>
            <td>
                <div className="flex justify-end">
                    <Link to={`posts/edit/${post.id}`} className="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-bold rounded-full text-sm px-5 py-1 mr-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">Edit</Link>
                    <button value={post.id} onClick={this.deletePost} type="button" className="bg-red-500 rounded-full text-white px-3 py-1 font-bold">Delete</button>
                </div>
            </td>
        </tr>);
    }