A ReactJS CRUD Table
Tags: react
Published: 2022-10-27 11:31:39

A few days back I had posted an article on this website [A HTML CSS JavaScript Front End CRUD Table](https://dev.to/prsaya/a-html-css-javascript-front-end-crud-table-21hp). Now, I have this front end app with similar functionality. This time I used a JavaScript library, [ReactJS](https://reactjs.org/), to build the app.

_To try this app you will require an installation of NodeJS and basic knowledge of web app front end programming with the HTML, CSS and JavaScript. Basic knowledge of ReactJS library is useful (refer the ReactJS web site's article: [Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html)), especially knowing the concepts of **react component** and **state**._

The app is a front end browser client. There is no back end program or a database. We use a [JavaScript Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) for storing the data and perform CRUD (Create, Read, Update, Delete) operations on that data.

The array with data is defined within the react app itself (in the `index.js`). In a real web app, the front end would be connecting to a web server and the database via web APIs to access data and perform some functions on it.

The data is a set of items with `name` and `quantity` properties. In the app, each item is a table row. We can add an item, update an existing item's quantity or delete an item. Also, navigate to the first or last row of the table.

The data is listed in a HTML table of the user interface. The user interface also has buttons to click on and text boxes to enter input and labels to show text or status message.

The initial items data is defined as follows:

```
const INITIAL_DATA = [
    { name: "Paper", quantity: 20 },
    { name: "Pencils", quantity: 8 },
    { name: "Paper-clips", quantity: 100 }
]
```

This becomes the initial state of the items data in the react app. The initial state is set from the react component's `componentDidMount` lifecycle method of the `App` component (`App` is the main (known as parent) component for this app).

```
    componentDidMount() {
        this.setState({ 
            data: INITIAL_DATA,
            status: { msg: "Items data loaded." }
        });
    }
```

Further, as we perform CRUD operations on the data from the user interface, this state is updated. In addition to the data, there are other aspects of the app and are maintained as state as shown below in the `constructor` of the `App` component definition.

```
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            rowIx: null,
            name: "",
            quantity: "",
            status: { msg: "" }
        }
        ...
}
```

The other components for this app (known as child components) are as shown in the `App` component's `render` method below. Note that these child components can be related to the specific widgets or a grouping of them within the user interface.

```
    render() {
        return (
            <div>
                <Heading />

                <TextInputs 
                    handleNameChange={this.handleNameChange} 
                    handleQtyChange={this.handleQtyChange} 
                    name={this.state.name} 
                    quantity={this.state.quantity} 
                />

                <DataTable
                    data={this.state.data}
                    rowIx={this.state.rowIx}
                    radioClick={this.radioClick}
                />				

                <ButtonsBar 
                    addBtnClick={this.addBtnClick}
                    updateBtnClick={this.updateBtnClick}
                    deleteBtnClick={this.deleteBtnClick}
                    clearBtnClick={this.clearBtnClick}
                    navBtnClick={this.navBtnClick}
                />

                <StatusLabel status={this.state.status} />
            </div>
        );
    }

```

The `App` also defines all the event listener methods for various widgets of the user interface. For example, the Add button's `onClick` event listener is defined as `addBtnClick`.

---

## Try the App

You start by creating a react app and use the provided code to complete and run the app.

First, create a new react project, from your operating system terminal command prompt:

```
npx create-react-app items-app
```

This creates the `items-app` project folder with necessary files. 

Next:

- Delete all files in the `src/` folder.
- Create two files `index.js` and `index.css` in the `src/` folder. 
- Add the code for the two files from this GitHub Gist [A ReactJS CRUD Table](https://gist.github.com/prsaya/ba03fa356a3c185839011d313c203793).

Run the app:

```
cd items-app
npm start
```

The user interface for the app in the browser looks like in the below screenshot:

![The react table app with data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnr6ixmuxhzdruhifesr.png)




---