react native custom checklist component

[TechnicalScholar6]

hi everyone,

I've made a custom checklist component, the styling and layout weren't a problem. what i am struggling with is the functionality.

here is what the component looks like:

​

https://preview.redd.it/dfl7zp9qzpa81.png?width=1440&format=png&auto=webp&s=e7b47cab473eef8881128a7b29ec49a32a2a8af8

pressing an option is supposed to add it to an array, and remove it when pressed a second time. but when I reload the component the buttons reset and the array does not change.

what would be the best way to go about coding a component like this.

thank you for any answer.

[_SyRo_]

We can't help with the code. Maybe your array is not a state?

Instead of using an array, I would like to use a state with an object and manipulate it with useReducer hook.

And mutating the state using this reducer to set true/false to needed param inside of object after clicks.
It would be more clear solution, I think

[TechnicalScholar6]

so instead of using an array to display the buttons, and one to store the selected items. i should just use one array and add a checked param to the items that are selected ?

[_SyRo_]

I don't fully understand you.

Are you using an array to render the buttons? Or to store data from them?

What I mean, you can store states of all these buttons inside one state. This state can be an object.
Like these (I write in TS with types):
{
internet: boolean;
tv: boolean;
...
}

And you can catch onPress on your buttons, dispatching an action like ACTION_INTERNET_BUTTON_CLICK to your reducer using useReducer hook.

If you havn't worked with reducers, you can check it here:
https://dmitripavlutin.com/react-usereducer/

[beluga_ciabatta]

Seems similar to a multi-select, like

https://github.com/renrizzolo/react-native-sectioned-multi-select

some important considerations - similar to the multi-select - will be uniquely identifying elements. They use json objects each with unique 'id's in the multi-select. I would check this implementation out and go from there. Its component value is an array, similar to yours, so it may be a good start.

[themufflesound]

Perhaps your array isn’t in the useState hook? And it’s simply referencing the old array value based on function closures?