I have a JSON
let users = {
activeUsers: [
{
userId: '1',
email: '[email protected]',
givenName: 'Marc',
familyName: 'S-t',
},
{
userId: '2',
email: '[email protected]',
givenName: 'Marc',
familyName: 'S-t',
},
{
userId: '3',
email: '[email protected]',
givenName: '',
familyName: 'B-n',
},
{
userId: '4',
email: '[email protected]',
givenName: 'Jeroen',
familyName: 'V-k',
},
{
userId: '5',
email: '[email protected]',
givenName: 'Dastan',
familyName: 'H-d',
},
{
userId: '6',
email: '[email protected]',
givenName: 'Emin',
familyName: 'D-v',
},
{
userId: '7',
email: '[email protected]',
givenName: 'Douwe',
familyName: 'H-a',
},
],
};
need to make a dropdown with the above fields i have done this
const renderlists = () => {
return (
<div>
<div>
<CheckboxDefault
label={'select all'} // this button to select and unselect all
onChange={(event) => handleselectAll(event.target.checked)}
/>
</div>
<div>
<p> Selected Contacts({userCount}) </p>
</div>
<div>
<div>
<InputSearch
placeholder={'search user'} // for searching user form list
onChange={(event) => handleSearch(event.target.value)}
/>
</div>
</div>
<div>
{renderUsers(usersToShow, true)} //method to show user after search
</div>
</div>
);
};
i am not able to achieve the select all functionality when the user search and when the user do not search and uses the select and unselect all
when a user check select all, all the seven user should be selected and on unselecting any one of then the select all checkbox should be unchecked,
second when a user search the user the search result should come if all of them are selected the select all should be checked otherwise will work same that on selecting select all on the search result item it should select and unselect them but not the others which are not there in the search list, on selection the userid should be pushed into an array for hose users which are selected.