Learning about the State and Lifecycle

I came across my first issue with State this past week. I was using buttons to let someone choose a zipcode to search. The results seemed to be delayed. If I clicked 19106, I received one a result from the query, but if I clicked it again I received a second result. Subsequent clicks continued to return the same second result.

So, I took a step back.

I bought an Udemy course on React with Redux and began the React portion.

I reread the Facebook documentation on React’s state lifecycle.

At first I thought I discovered the solution when I learned that the setState method is enacted asynchronously. However, you can pass a second parameter as a callback method to setState. I tried this with a simple console.log as the callback function to see if I could setState with updated info, then print that info with the callback function. That did not work. The old state information was being printed.

With that knowledge I then used a significant amount of console logs to track down where I was misunderstanding how and when the parent passes props to a child class. I also misunderstood how a child class gets instantiated. I discovered that my parent class was correctly passing props to my child class on the button click, but that the child class would pay no attention updated state or properties, unless specifically instructed to do so with the componentWillReceiveProps().

It turns out the state constructor method of a child class is called just once for each instance of a class.

If you update the parent application’s state and want to update the information a particular instance of a child class is using, you need to inform that child instance that there are new properties it needs to use. That is accomplished with the factory method componentWillReceiveProps()

My next mistake was trying to take the props sent to componentWillReceiveProps() and then update the state of the child class instance within that componentWillReceiveProps() method. Even if I succeed in updating the state of a particular child instance, it doesn’t matter. The child will not re-render just because of that state change.
What did ultimately work was to alter my getData() method to receive a parameter. I then pass in the “zipcodeToSeachFor” that I want it to use.
When componentWillReceiveProps() receives a new parameter called “newProps.” It calls getData in this way: getData(newProps. zipcodeToSeachFor). This successfully causes new data to be obtained and returned and rendered.

 

Building on Glitch

I like the new project called Glitch. It encourages you to build quirky websites and web apps online. Your app is hosted online, and you can “remix” other people’s projects.

I was able to pull in my initial github commit, but it didn’t include any dependencies. I had better luck after trying “remixing” several React projects. I found one that was essentially the same React boilerplate. I altered the files and uploaded the JavaScript class files I created in WebStorm. Then this began working: https://philly-311-react.glitch.me/

First week’s problems

I started with a series of buttons that execute a query to the 311 api based on zipcode. It queries with that zipcode and pulls back the number of records for that zipcode. My main problem with this at the moment is that the query is executing before the state has been updated with the new zipcode.

So, it’s supposed to work like this:
1. click button with the zipcode you want to search for
2. state is updated with new value for “zipcodeToDisplay”
3. virtual dom is rendered, triggering the showData.js method called componentWillReceiveProps
4. that componentWillReceiveProps method calls this.getData(); which executes the query with this.props.zipcodeToDisplay
5. the showData.js class renders and returns the number that comes back from{this.state.localJson.total_rows}

The problem is that events are not happening exactly in that order. React is doing everything as quickly as it can, and I need to find a way to ensure the initial state’s “zipcodeToDisplay” is updated before “zipcodeToDisplay” is passed as a prop to showData.js

A smaller problem: I created an initial commit of this to a public github. Why didn’t WebStorm also push the files in the public folder that include icons and such? I don’t know yet.

Creating an independent study React course at Temple University

Hi all. I am fortunate this semester to have an independent study course this semester (Fall 2017) in React.js at Temple. My professor for this course is Sally Kyvernitis.

I started this about a week ago with the intention of using a dataset from Open Data Philly. I looked through about ten of the datasets and chose “311 Service and Information Requests” because it has a large amount of varied data and lends itself to a few ideas I have for visualization.

While I do want to make a great looking tool for visualizing this data, my primary goal is to dig into react.js and learn to create sites that make full use of its tools.