How to add dynamic rows in table using React-Redux

Hello everyone,

This is continuation of my article on React and Redux in Typescript. In this article we will see how to create dynamic rows in a table using redux store. This is simple dynamic table in which you can add or remove rows. I use immutability-helper package. I believe you have basic understanding of React and Redux (if not please refer my previous articles).

To have dynamic rows in react, its important to have unique key, we can’t go with the index value from an array of values. That’s the only reason we should need unquie key in our array. Because I’m making this dynamic rows by adding and slicing values in an array. So here the app state looks more like this

In Actions, we created three different actions

· createRow

· removeRow

· updateRow

Reducer have separate function for these three actions and using immutability-helper,

I create the key using Date.now() (which gives value with milliseconds and it will be unique each time you click the AddNewRow button)

In design, we used <ul> and <li>, we can also use <table> and <tr> as well

Github to the project https://github.com/ahamedfazil/react-redux-ts-sp/tree/feature/DYNAMIC-TABLE

Happy Coding

Ahamed