React Js Table with Checkbox

<!DOCTYPE html>
<html>

</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState } = React;

function App() {
            const [users, setUsers] = useState([
                { id: 1, name: 'John', email: 'john@example.com', age: 25 },
                { id: 2, name: 'Jane', email: 'jane@example.com', age: 30 },
                { id: 3, name: 'Bob', email: 'bob@example.com', age: 35 },
                { id: 4, name: 'Alice', email: 'alice@example.com', age: 40 },
                { id: 5, name: 'Sam', email: 'sam@example.com', age: 45 },
                { id: 6, name: 'Emily', email: 'emily@example.com', age: 50 },
                { id: 7, name: 'Michael', email: 'michael@example.com', age: 55 },
                { id: 8, name: 'Sophia', email: 'sophia@example.com', age: 60 },
                { id: 9, name: 'David', email: 'david@example.com', age: 65 },
                { id: 10, name: 'Olivia', email: 'olivia@example.com', age: 70 },
                { id: 11, name: 'Daniel', email: 'daniel@example.com', age: 75 }
            ]);

const [selectedUsers, setSelectedUsers] = useState([]);
            const [isAllSelected, setIsAllSelected] = useState(false);

const selectAll = () => {
                setSelectedUsers([]);

if (!isAllSelected) {
                    users.forEach(user => {
                        setSelectedUsers(prevSelectedUsers => [...prevSelectedUsers, user.name]);
                    });
                }
                setIsAllSelected(!isAllSelected);
            };

const isUserSelected = (user) => {
                return selectedUsers.includes(user.name);
            };

const isAllUsersSelected = () => {
                return selectedUsers.length === users.length;
            };

return (
                <div className='container'>
                    <h3>React Js Table with Checkbox | SelectAll</h3>
                    <p className="selected-users">{selectedUsers.join(', ')}</p>
                    <table>
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" checked={isAllSelected} onChange={selectAll} />
                                </th>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Age</th>
                            </tr>
                        </thead>
                        <tbody>
                            {users.map(user => (
                                <tr key={user.id}>
                                    <td>
                                        <input
                                            type="checkbox"
                                            checked={isUserSelected(user)}
                                            onChange={() => handleUserSelect(user)}
                                        />
                                    </td>
                                    <td>{user.id}</td>
                                    <td>{user.name}</td>
                                    <td>{user.email}</td>
                                    <td>{user.age}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById('app'));
    </script>
    <style>
        .container {
            width: 400px;
            margin: 0 auto;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            padding: 20px;
        }

h3 {
            color: #333;
        }

.selected-users {
            font-weight: bold;
            margin-bottom: 10px;
        }

table {
            width: 100%;
            border-collapse: collapse;
        }

th,
        td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

th:first-child,
        td:first-child {
            width: 30px;
        }

input[type="checkbox"] {
            margin: 0;
        }

tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</body>

</html>