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.sstatic.net/SfbSJ.png

I Guess that you are trying to implement the "select all" option(?). It is addressed in here: stackoverflow.com/questions/32641541/… — user16241255
– user16241255, Commented Jan 29, 2022 at 21:31

Ben · Accepted Answer · 2022-01-29 21:31:10Z

0

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;

answered Jan 29, 2022 at 21:31

Ben

6784 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Rubel Shahriar Over a year ago

if you don't worry i would like to share a link to you to find out this problem more effectively, that is: "zealous-bhaskara-09c56b.netlify.app/manage-all-order" .Please help me with paste this link to your browser. In that page i want click header checkbox and want to select all below all checkboxes.

Ben Over a year ago

I see it, can you please explain what is missing in the solution I gave you?

Rubel Shahriar Over a year ago

i tried your solution when you gave this. but it doesn't work. i don't know why its not working.

Ben Over a year ago

Do you get some kind of an error, can you share perhaps a codesandbox?

Rubel Shahriar Over a year ago

i am extremely sorry😥😥 your code is true and 100% working. i was made a mistake when you gave me this solution. that was totally my fault. my problem has been solved. thank you!

|

Aniruddha Tonge · Accepted Answer · 2022-01-29 21:30:39Z

0

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.

answered Jan 29, 2022 at 21:30

Aniruddha Tonge

415 bronze badges

1 Comment

Rubel Shahriar Over a year ago

if you don't mind this is my link: "zealous-bhaskara-09c56b.netlify.app/… clicking header checkbox i want to select all below checkboxes, how can i do that?

Collectives™ on Stack Overflow

how to toggle all checkbox by clicking header checkbox react js

2 Answers 2

12 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related