Creating a editable dynamic JSON table in React part 2
Tags: react, javascript, programming
Published: 2021-07-22 01:12:19

## Part 2
<sub>This articles is part 2 of a series, part 1 is [here](https://dev.to/sajrashid/creating-a-editable-dynamic-json-table-4686)</sub>

<sub>NB: We're using craco to help with our builds as we can use Tailwind to locally test our table</sub>

### Clone this [branch](https://github.com/sajrashid/React-Dynamic-Json-Table/tree/Boilerplate)

<code>  git clone -b boilerplate https://github.com/sajrashid/React-Dynamic-Json-Table/tree/boilerplate </code>

Install node modules
<code> Yarn  </code>

Run the app using 
<code> Yarn start </code>

You should see the homepage. Have a look around it's a modified boiler plate template built from create-react-app.

Folder structure has been setup, <code> src/npm-component/react-dj-table</code> is where the table will live, a Tests folder that replicates the same folder structure and some mock data.

### A word about complex state

Managing state using the <code>useState</code> hook is fine for small components, for a component with complex state we need to utilise the <code>useReducer</code> hook. 

Whenever state values change that depend on other states values, you're getting into the realms of managing complex state. For anyone that's tried reducers are a game changer.... redux anyone ?

ℹ️ <sub>info- Did you know, under the covers <code>useState</code> actually calls useReducer!<sub>

### Setting up the reducer

in the <code>src/npm-component/react-dj-table/reducers</code> folder

create a <code>tablereducer.js</code> & <code>actions.js</code> file

add the following code to <code>actions.js</code>

```js
export const ACTIONS={

    TESTSTATE:'teststate'
}
```

and to <code>tablereducer.js</code>
```js
import { ACTIONS } from './actions'

export const TableReducer = (state, action) => {

    switch (action.type) {
        case ACTIONS.TESTSTATE:
            state.testValue ++
            return { ...state }
        default:
            return state

    }
}
```
So far we have set-up the reducer, with a single ACTION, that increments a value and save that value to state, pretty straight-forward.

in the <code>react-dj-table</code> folder create a file called <code>table.js</code> 

Here we need to set-up initial state and the reducers dispatch function.

add the following code to <code>table.js</code>

```js
import React, { useReducer } from 'react'

import { TableReducer } from '../react-dj-table/reducers/tablereducer'

const Table = (props) => {

    const initialState = {
        testValue: 5 
    }

    const [state, dispatch] = useReducer(TableReducer, initialState)

}

export default Table

```

take a moment to digest the above code, self explanatory so far hopefully.

..... ready ? , it's time to call the reducer via dispatch

```js
dispatch({ type: ACTIONS.TESTSTATE })
```

We need to call the reducer and supply the Action name from the actions file, we don't need to use defined actions & they don't need to be called action either. It's just a conventions & preferences thing. 

ℹ️ Tip - It does help while learning as you'll get less typo's.

Update our <code>table.js</code> file

```js
import React, { useReducer } from 'react'

import { ACTIONS } from '../react-dj-table/reducers/actions'
import { TableReducer } from '../react-dj-table/reducers/tablereducer'

const Table = (props) => {

    const initialState = {
        testValue: 5
    }

    const [state, dispatch] = useReducer(TableReducer, initialState)

    const buttonClick = () => {
        dispatch({ type: ACTIONS.TESTSTATE })
    }

    return (
        <div>
            <button onClick={buttonClick}>Increment</button>
            {state.testValue}
        </div>
    )

}
export default Table
```

We have a added a button with a click funtion that calls the reducers dispatch functions passing in an action.

Add the table (ok, it's not really a table but we can pretend for testing purposes) to the <code>src/pages/home.js</code> page 


```js
import React from "react";
import Table from '../npm-component/react-dj-table/table'

const Home = props => {
  return (
    <div className="flex justify-center w-full h-full mt-4">
     <Table />
    </div>
  )
}

export default Home;

```

Go to your page click the increment button.

Awesome we have a working reducer!!!

🤓🤓🤓



In the next part we're going to add some data, build our rows, cells and perhaps add a sort. Then maybe accelerate the pace ? 

The completed code is in [part2 branch](https://github.com/sajrashid/React-Dynamic-Json-Table/tree/part2) 


<sub>⭐⭐⭐ The repo [here](https://github.com/sajrashid/React-Dynamic-Json-Table) </sub>

<sub>[Demo site](https://react-dj-table.netlify.app/about/) </sub>

✌️✌️✌️ Talk to you in part 3, bye for now.