This week I worked on my the observation submission screen for my react native application. This screen builds a form made up of my own react native components from a JSON containing form data. During this process I learned a bit about react native components, and how react deals with state.

For most of the components I ended up creating, I really just made them out of preexisting react native components. This was to be expected as most of my inputs are fairly basic. What did cause me trouble was my Checkbox observation component. I had to create my own system of recording which check boxes were selected dynamically. I did this by building an array of checkbox objects into a react use-state. For a long time, I was unable to get react to update its component, to reflect that a checkbox was selected. I would click the box, and nothing would happen. Eventually I realized that I was changing the state arrays variables and resetting the state to the same array address. React doesn’t consider this to be a change of state, so it did not re-render my components. I circumvented this by making a deep copy of the state array, and passing that to my react use state. This did the trick, and the check boxes started working.

To conclude, I learned a bit regarding how react deals with sate, and I also learned more about the various react native components. Overall, I feel like I am becoming more competent in react-native which is pretty cool.

See you next time!