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;