In this tutorial, you will learn how to add dynamic rows in React. If you want to do it in plain HTML (without using React), then you can follow this.
First, you need to create an array that will hold all the rows you want to display.
const [data, setData] = React.useState([]);
After that, you need to create a button that when clicked will add a new element in array.
<button type="button" onClick={ function () {
const temp = [ ...data ];
temp.push({
name: "",
age: ""
});
setData(temp);
} }>Add row</button>
In order to push a new element in array in React state variable, we first need to create a shallow copy of it. We can also do a deep copy, but for simple objects shallow copy is enough. Then we are pushing a new empty element in that shallow copy. Finally, we are updating that “temp” array with our React state variable.
Now we need to display all the rows with input fields.
{ data.map(function (d, index) {
return (
<div key={ `data-${ index }` }
className="data">
<input type="text" className="name"
value={ d.name }
onChange={ function (event) {
const temp = [ ...data ];
temp[index].name = event.target.value;
setData(temp);
} }
placeholder="Name" />
<input type="text" className="age"
value={ d.age }
onChange={ function (event) {
const temp = [ ...data ];
temp[index].age = event.target.value;
setData(temp);
} }
placeholder="Age" />
[ delete button goes here ]
</div>
);
} ) }
We are setting the initial value. After that, everytime the value of input field changes, we are again creating a shallow copy of React state variable. Then we are updating the “name” or “age” value at that specific index. event.target.value will return the current value of that input field.
Now we need to find a way to delete the row. Following code goes in the [ delete button goes here ] section.
<button type="button" onClick={ function () {
const temp = [ ...data ];
temp.splice(index, 1);
setData(temp);
} }>Delete</button>
Just like we created a shallow copy for adding a new element in array, we need to create a shallow copy for removing an element as well. We are using Javascript built-in “splice” function to remove 1 element at a specific index. Finally, we are updating the React state variable.
One more thing you can do is to initialize an array. This is useful if you are already receiving a data from your server.
<?php
$data = [
[ "name" => "Adnan", "age" => 33 ]
];
?>
<input type="hidden" id="data" value="<?php echo htmlentities(json_encode($data)); ?>" />
Here, we are creating a PHP array and setting it’s value in a hidden input field as a JSON string. After that, we need to get that value from hidden input field, parse the JSON string and initialize our array.
let dataArr = document.getElementById("data").value;
dataArr = JSON.parse(dataArr);
const [data, setData] = React.useState(dataArr);
That is how you can add or remove dynamic rows in React. Following is the complete code for this:
<html>
<head>
<title>Dynamic rows in React</title>
</head>
<body>
<div id="app"></div>
<?php
$data = [
[ "name" => "Adnan", "age" => 33 ]
];
?>
<input type="hidden" id="data" value="<?php echo htmlentities(json_encode($data)); ?>" />
<script type="text/babel">
function App () {
let dataArr = document.getElementById("data").value;
dataArr = JSON.parse(dataArr);
const [data, setData] = React.useState(dataArr);
return (
<>
{ data.map(function (d, index) {
return (
<div key={ `data-${ index }` }
className="data">
<input type="text" className="name"
value={ d.name }
onChange={ function (event) {
const temp = [ ...data ];
temp[index].name = event.target.value;
setData(temp);
} }
placeholder="Name" />
<input type="text" className="age"
value={ d.age }
onChange={ function (event) {
const temp = [ ...data ];
temp[index].age = event.target.value;
setData(temp);
} }
placeholder="Age" />
<button type="button" onClick={ function () {
const temp = [ ...data ];
temp.splice(index, 1);
setData(temp);
} }>Delete</button>
</div>
);
} ) }
<button type="button" onClick={ function () {
const temp = [ ...data ];
temp.push({
name: "",
age: ""
});
setData(temp);
} }>Add row</button>
</>
);
}
ReactDOM.createRoot(
document.getElementById("app")
).render(<App />);
</script>
<script src="js/babel.min.js"></script>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
</body>
</html>
If you face any problem in following this, kindly do let me know.