All Select Checkbox in React JS - In Hindi 

Glad it helped

Welcome 👍

Glad it helped!

Thanks ❤️

Yes, you can add a useEffect; having checkbox state as dependencies. And add you condition and function call based on requirement.. I hope it may make sense... Let me know if you have any queries..

did you figured it out yet ?

@@zarefgamz2515 yeah

@@n7pankake236 plz show I've been working on it for hours

@@zarefgamz2515 Is a bit complicated it I would need to do a clean example for it I can just copy and paste the code I have if you want and you figure out how it works

Welcome 🤗

Thanks 😊

Please share codesandbox link.. I'll check

@@codingwithjeevan thank you sharing

Okay will try to make a video on this. If you need some instant help, you can ping me on instagram or Linkedin.

Yes, sure. Ping me on instagram : g1_mishra

Did you get your ans.?

@@abhinavswami4696 codesandbox.io/s/relaxed-thompson-984zg

Codesandbox not working please update

How can I help you?

Smjha nhi, can you explain.

Bro ping me on instagram. g1_mishra

share codesandbox link of your implementation.

Yes, you're right. In codesandbox link you can see, I have used some. It depends what comes to mind at that particular moment.

Yes

Share your codesandbox link

@@codingwithjeevan I think youtube is constantly deleting my comment because there is a link, so I'm pasting the code here. import React, { useState, useEffect } from 'react'; const UserTable = props => { const [users, setUsers] = useState([]); const userData = [props.users]; useEffect(() => { setUsers(userData) }, []); const handleChange = (e) => { const { name, checked } = e.target; if (name === "allSelect") { let tempUser = users.map(user => { return { ...user, isChecked: checked } }); setUsers(tempUser); } else { let tempUser = users.map(user => user.name === name ? { ...user, isChecked: checked } : users); setUsers(tempUser); } } return ( Select All Hostname Username Stop Sleep Start Status CPU Temperature(°C) GPU Info Edit/Delete { props.users.length > 0 ? ( props.users.map(user => ( {user.name} {user.username} props.editStopPC(user)} className="btn btn-danger">Stop props.editSleepPC(user)} className="btn btn-warning">Sleep props.editStartPC(user)} className="btn btn-success">Start {user.status} {user.cpu} {user.info} props.editRow(user)}> edit props.deleteUser(user.id)}> delete )) ) : ( {props.users[0]} No Users ) } ) }; export default UserTable;

same thing with me

Yes. You can pass isChecked : true to the object which you wanted to be default selected.

@@codingwithjeevan but I can't change the API is there any chance to do with if else if

You can prepare data after getting response from API and then set that data into state.

@@codingwithjeevan yaa i will try it thanks

@@codingwithjeevan hey thanks dude i got it

It will work

@@codingwithjeevan it says reactjs needs something else to read that logic :/

Agree but It's better to use array.some() in this case. It was updated way back in the source code.

Remove those optional chaining. stackoverflow.com/questions/61440200/optional-chaining-does-not-work-in-create-react-app

not possible... have you checked codesandbox link given below?

try to add the this line: `console.log(...users.filter(i => i?.isChecked));` if it's still not clear, let me know

Create your custom dropdown and add checkbox in the same way

I have made a example customize it as much as you can codesandbox.io/s/customdropdown-602uy?file=/src/App.js

Hit that RED subscribe button. If I was able to help you in anyway :)

@@codingwithjeevan i used react select but some tweaking required

can you please explain the issue and step to re-produce? and have you checked code-sandox link