根据对象的值从数组中删除和重新添加对象

Question

Using this array of objects as an example:

[ { "id": 1, "name": "John", "lastname": "Johnson", "registered": true }, { "id": 2, "name": "David", "lastname": "Davidson", "registered": false }, { "id": 3, "name": "Ben", "lastname": "Benson", "registered": false }, { "id": 4, "name": "Greg", "lastname": "Gregson", "registered": true }, { "id": 5, "name": "Peter", "lastname": "Peterson", "registered": true } ]

Then the array is mapped to be displayed

const displayedList = array.map(person => <Component key={person.id} /> )

Now if I just add a checkbox

<input onChange={onChangeHandler} type="checkbox" id="registered" name="registered" /> <label htmlFor="scales">Hide Registered</label>

Is there a way to go through the array and remove the items that have value of "registered" set as true if the checkbox is checked and put them back once it's unchecked again? I've tried using the filter method and few others, but can't seem to figure out a way to do something like this. Any tips would be greatly appreciated

Answer 1

A filter over the array should work, but the condition may be a little tricky:

const hideRegistered = true; //For the simplicity of the example, this should be a state variable

...

const filteredUsers = users.filter((user) => hideRegistered ? !user.registered : true);

Then use filteredUsers to render your components.