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;