How I created nested properties in my React.js state (and why you probably shouldn’t…)

As programmers, we tend to think out loud with ideas that sound great, but are terrible in practice. It’s me — I’m programmers.
As my graduation from Flatiron School Software Engineering Immersive is quickly approaching (in 9 days!), I’ve been tasked with creating my first full stack application utilizing CRUD functionality, RESTful routes, and a slew of other deliverables. I’m using Rails as an API on the backend, and React on the front.
Working with React has been an absolute joy, particularly with the built-in functionality of state, and how it makes temporarily storing information easy. So what is state?
From thinkster.io-
“The heart of every React component is its ‘state’, an object that determines how that component renders & behaves. In other words, ‘state’ is what allows you to create components that are dynamic and interactive.”
Awesome. Now to the good stuff.
The current application I’m working on utilizes Google Places API and an npm package, google-maps-react, to display a map with three markers that show a user where they should go out to for a night on the town.
I was using a function that changes a users’ three input locations into a Google query, and used interpolation to make a fetch request to receive back the coordinates for said locations. Since I’m making 3 fetch requests at a time for 3 different locations, I needed to store them all separately to keep my data clean. When I first started, my state looked something like this:
For the Map to render with 3 location markers, Google Maps requires that I pass in 2 arguments, a longitude and a latitude. That presents a bit of a problem. I thought to myself:
“If I have to save each location’s longitude and latitude separately in state, it becomes messy and an eye sore. What’s the cleanest and most readable way to do this? What if I nested that information inside of each location in state for access later?”
Thus, beginning my journey to creating nested properties in state, and (through trial and error) figuring out the best way to set them.
Though this is a lot easier to read, and in theory, should be easily accessible, it’s not. React.js was not oriented to work with nested state as it certainly has its limitations — if you change a small piece of the nested properties, but don’t change the rest, React will not re-render the view because it’ll only consider changes to the “parent” property.
In this particular case, there wasn’t a point where I’d need to update only one part of the properties held in state, so I decided to go for it. I initially thought that I could access the nested properties in state like I would with any object:
this.setState({ location_1.name: event.target.value })
Absolute no-go. Because React wasn’t set up in this way, I had to get real creative with how I setState of these newly nested attributes.
TLDR; using the spread operator to deconstruct the properties of ‘location_1’ in state gave me the ability to change its “children” properties, thus allowing me to store the information in a way that was accessible and readable for me.
this.setState({ location_1: {...this.state.location_1, name: “Name”} })
Setting the state of each location with nested properties in this way allowed me to temporarily store latitude and longitude data that was accessible and easy to read in a non-destructive way, but I wouldn’t recommend it. Anytime you’re working against a programming language instead of with it, you’re likely pushing past the boundaries or purpose of it’s built-in functionality!
If you have any questions or comments, leave them down below! Code onward.
