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

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>&times;</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>&times;</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>&times;</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>&times;</button>
                </form>
            </td>
        </tr>
    )
}