How can I make my React app render Bootstrap tables with crud - reactjs

Question

I'm using the following code to generate a simple UI, and I'm trying to convert it to use Bootstrap.
This is my original code (using Skeleton);
render:function(){
return (
<div className="grocery-item row">
<div className="six columns">
<h4 className={this.props.item.purchased ? "strikethrough" : "" }>
{this.props.item.name}
</h4>
</div>
<form onSubmit={this.togglePurchased} className="three columns">
<button className={this.props.item.purchased ? "btn btn-danger" : "button-primary"}>{this.props.item.purchased ? "unbuy" : "buy"}</button>
</form>
<form className="three columns" onSubmit={this.delete}>
<button>×</button>
</form>
</div>
)
}
I tried doing something like this;
render:function(){
return (
<table class="table table-striped">
<thead>
<tr>
<th>Column 1</th>
<th>Columan 2</th>
<th>Columan 3</th>
</tr>
</thead>
<tbody>
<tr>
<h4 className={this.props.item.purchased ? "strikethrough" : "" }>{this.props.item.name}</h4>
<form onSubmit={this.togglePurchased} className="three columns">
<button className={this.props.item.purchased ? "btn btn-danger" : "button-primary"}>{this.props.item.purchased ? "unbuy" : "buy"}</button>
</form>
<form className="three columns" onSubmit={this.delete}>
<button>×</button>
</form>
</tr>
</tbody>
</table>
)
}
But it's not working like I expect. I'm using react-express-examplar as my starting point.
How can I get Bootstrap tables working in my React app?

Answer 1

I think you'll have an easier time if you start your app using create-react-app. They even give instructions on how to use Bootstrap with React.
You said you're new to React. There are a lot of moving parts that can be overwhelming to figure out at first. Using create-react-app will take out a lot of the learning curve and make it a lot easier for you to get started with as little friction as possible.
Good luck!

Answer 2

From my understanding, you want the name and buy/unbuy buttons to come as a row , under respective columns.
In the tr tag, give each html part as a td tag
Please refer below html snippet:
<td>
<h4 class="strikethrough">
name
</h4>
</td>
<td>
<form class="three columns">
<button class="btn btn-info">buy</button>
</form>
</td>
<td>
<form class="three columns">
<button>×</button>
</form>
</td>
Please try to modify the html in your component render method, similarly.

Answer 3

You added table to wrong Component. It must be on GroceryItemList.jsx
Caution: Form is not allowed inside table. I'm just providing the structure and UI and code is not tested.
::: structure should something like-
GroceryItemList.jsx Component::::
render:function(){
return (
<div>
<table className="table">
<thead>
<tr>
<th>Column 1</th>
<th>Columan 2</th>
<th>Columan 3</th>
</tr>
</thead>
<tbody>
{this.props.items.map((item,index)=>{
return (
<GroceryItem item={item} key={"item"+index} />
)
})}
<GroceryListAddItem />
</tbody>
</table>
</div>
)
}
GroceryItem.jsx Component::::
render:function(){
return (
<tr>
<td>
<h4 className={this.props.item.purchased ? "strikethrough" : "" }>
{this.props.item.name}
</h4>
</td>
<td>
<form onSubmit={this.togglePurchased}>
<button className={this.props.item.purchased ? "" : "button-primary"}>{this.props.item.purchased ? "unbuy" : "buy"}</button>
</form>
</td>
<td>
<form onSubmit={this.delete}>
<button>×</button>
</form>
</td>
</tr>
)
}