How to Add an Array Dynamically to React-Bootstrap Table ?

// App.js 
import React, { useState } from 'react'; 
import { Table, Button } from 'react-bootstrap'; 
import './App.css'; 
function App() { 
	const [data, setData] = useState([]); 
	const [arrItem, setArrItem] = useState(''); 
	const [itemToAdd, setItemToAdd] = useState([]); 
	const [srNo, setSrNo] = useState(1); 
	const addToArrFunction = () => { 
		setItemToAdd([...itemToAdd, { id: srNo, value: arrItem }]); 
		setArrItem(''); 
		setSrNo(srNo + 1); 
	}; 
	const addToTable = () => { 
		setData([...data, ...itemToAdd]); 
		setItemToAdd([]); 
	}; 
	return ( 
		<div className="app-container"> 
			<h1 className="app-title">GeeksforGeeks</h1> 
			<h4>Adding Array to Table using useState</h4> 
			<Table striped bordered hover className="custom-table"> 
				<thead> 
					<tr> 
						<th>Sr. No</th> 
						<th>Data in Table</th> 
					</tr> 
				</thead> 
				<tbody> 
					{data.map((item, index) => ( 
						<tr key={index}> 
							<td>{item.id}</td> 
							<td>{item.value}</td> 
						</tr> 
					))} 
				</tbody> 
			</Table> 
			<input 
				type="text"
				value={arrItem} 
				onChange={(e) => setArrItem(e.target.value)} 
				placeholder="Enter data"
				className="data-input"
			/> 
			<div className="buttons-container"> 
				<Button onClick={addToArrFunction} className="add-button"> 
					Add to Temp Array 
				</Button> 
				<Button onClick={addToTable} className="add-button"> 
					Add All to Table 
				</Button> 
			</div> 
			<div className="elements-to-add"> 
				<h3>Elements to Add:</h3> 
				<ul> 
					{itemToAdd.map((item, index) => ( 
						<li key={index}>{`${item.id}: ${item.value}`}</li> 
					))} 
				</ul> 
			</div> 
		</div> 
	); 
} 
export default App;

//App.js 
import React, { useRef } from 'react'; 
import { Table, Button, InputGroup, FormControl } 
	from 'react-bootstrap'; 
import './App.css'; 
function App() { 
	const inputRef = useRef(); 
	const listRef = useRef(); 
	const arr = []; 
	let srNo = 1; 
	const addTaskFunction = () => { 
		const taskText = inputRef.current.value; 
		const taskArray = taskText.split(',') 
			.map((item) => item.trim()); 
		if (taskArray.length > 0) { 
			taskArray.forEach((taskText) => { 
				if (taskText) { 
					arr.push(taskText); 
					const taskRow = document.createElement('tr'); 
					taskRow.innerHTML = ` 
			<td>${srNo}</td> 
			<td>${taskText}</td> 
			<td> 
			<button class="complete-button">Complete</button> 
			<button class="remove-button">Remove</button> 
			</td> 
		`; 
					const completeButton = 
						taskRow.querySelector('.complete-button'); 
					completeButton.addEventListener('click', 
						() => completeTaskFunction(taskRow)); 
					const removeButton = 
						taskRow.querySelector('.remove-button'); 
					removeButton.addEventListener('click', 
						() => removeTaskFunction(taskRow)); 

					listRef.current.appendChild(taskRow); 
					srNo++; 
				} 
			}); 
			inputRef.current.value = ''; 
		} 
	}; 
	const completeTaskFunction = (taskRow) => { 
		const completeButton = 
			taskRow.querySelector('.complete-button'); 
		completeButton.disabled = true; 
		taskRow.style.textDecoration = 'line-through'; 
	}; 
	const removeTaskFunction = (taskRow) => { 
		taskRow.remove(); 
	}; 
	return ( 
		<div className="app-container"> 
			<h1 className="app-title">GeeksforGeeks</h1> 
			<h4>Adding Array to Table using useRef</h4> 
			<InputGroup className="mb-3"> 
				<FormControl 
					placeholder="Add a new task (comma-separated)..."
					ref={inputRef} 
				/> 
				<Button onClick={addTaskFunction} variant="primary"> 
					Add 
				</Button> 
			</InputGroup> 
			<Table striped bordered hover 
				className="custom-table" ref={listRef}> 
				<thead> 
					<tr> 
						<th>Sr. No.</th> 
						<th>Task</th> 
						<th>Actions</th> 
					</tr> 
				</thead> 
			</Table> 
			<div className="elements-to-add"> 
				<h3><center>Task List</center></h3> 
			</div> 
		</div> 
	); 
} 
export default App;