how to toggle all checkbox by clicking header checkbox react js

Question

is there anyone to help that how can i implement functionality in toggleCheckboxes() to select all checkboxes. In my code there is a map method. it controls the number of checkbox input's. In table Data, every checkbox type input is shown after mapping an item from manageOrder. i tried with using useState, setAttribute but can't to solve this problem.

import React, { useEffect, useState, useRef } from 'react';
import { Container, Spinner } from 'react-bootstrap';
import './ManageAllOrder.css';

const ManageAllOrder = () => {
    const [manageOrder, setManageOrder] = useState([]);
    useEffect(() => {
        fetch('https://ghostly-blood-77078.herokuapp.com/orders')
        .then(res => res.json())
        .then(data => setManageOrder(data))
    }, [])
    //change status after click
    const changeStatus= (e) => {
        e.target.innerText = 'active'
    }
    //toggle checkbox
    const rowCheckbox = useRef('')
    const toggleCheckboxes = () => {
        


    }

    return (
        <Container>
            <div>
                <h3 className='my-4' style={{color: '#34495E'}}>Order Management</h3>
                <div>
                {!manageOrder.length ? 
                      <Spinner animation="grow" variant="warning" /> :

                    //table to show data
                    <table className="table">
                        <thead className='table-warning'>
                            <tr>
                                <th><input id='header-checkbox' type='checkbox' onClick={toggleCheckboxes()} /></th>
                                <th>OrderID</th>
                                <th>Date</th>
                                <th>Customer</th>
                                <th>Order</th>
                                <th>Place</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                    {manageOrder.map(order =>
                            <tr>
                                <td><p><input type='checkbox' ref={rowCheckbox}/></p></td>
                                <td><p>{order._id}</p></td>
                                <td><p>{order.date}</p></td>
                                <td><p>{order.displayName}</p></td>
                                <td><p>{order.name}</p></td>
                                <td><p>{order.place}</p></td>
                                <td><p>{order.amount}</p></td>
                                <td><p onClick={(e) => changeStatus(e)}>pending...</p></td>
                            </tr>
                        )}
                        </tbody>
                    </table>
                }
                </div>
            </div>
        </Container>
    );
};

export default ManageAllOrder;```


[i want to toggle all checkboxes after clicking the checkbox top left corner, i tried a few ways to implement that but i can't because of map method. ][1]
  [1]: https://i.stack.imgur.com/SfbSJ.png

Answer 1

First of all I couldn't see where are you setting the checkbox value in state. So what you can do is set checked firewood for each entry from the data fetched and then update that field accordingly and once you click on check all checkboxes then iterate the list marking all of them as true also you should populate that value back to your checkboxes(binding the data). Let me know if you have more questions.

Answer 2

You can try to use a useState hook to set checked to true/false, then use the input prop checked and set it with the state like so:

import React, { useEffect, useState, useRef } from 'react';
import { Container, Spinner } from 'react-bootstrap';
import './ManageAllOrder.css';

const ManageAllOrder = () => {
    const [manageOrder, setManageOrder] = useState([]);
    const [checked, setChecked] = useState(false)
    useEffect(() => {
        fetch('https://ghostly-blood-77078.herokuapp.com/orders')
        .then(res => res.json())
        .then(data => setManageOrder(data))
    }, [])
    //change status after click
    const changeStatus= (e) => {
        e.target.innerText = 'active'
    }
    //toggle checkbox
    const rowCheckbox = useRef('')
    const toggleCheckboxes = () => {
        setChecked(prevState => !prevState)
    }

    return (
        <Container>
            <div>
                <h3 className='my-4' style={{color: '#34495E'}}>Order Management</h3>
                <div>
                {!manageOrder.length ? 
                      <Spinner animation="grow" variant="warning" /> :

                    //table to show data
                    <table className="table">
                        <thead className='table-warning'>
                            <tr>
                                <th><input id='header-checkbox' type='checkbox' onClick={toggleCheckboxes} /></th>
                                <th>OrderID</th>
                                <th>Date</th>
                                <th>Customer</th>
                                <th>Order</th>
                                <th>Place</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                    {manageOrder.map(order =>
                            <tr>
                                <td><p><input type='checkbox' ref={rowCheckbox} checked={checked}/></p></td>
                                <td><p>{order._id}</p></td>
                                <td><p>{order.date}</p></td>
                                <td><p>{order.displayName}</p></td>
                                <td><p>{order.name}</p></td>
                                <td><p>{order.place}</p></td>
                                <td><p>{order.amount}</p></td>
                                <td><p onClick={(e) => changeStatus(e)}>pending...</p></td>
                            </tr>
                        )}
                        </tbody>
                    </table>
                }
                </div>
            </div>
        </Container>
    );
};

export default ManageAllOrder;