All components separated

So for the last couple days have been working on moving each of the separate elements (checkbox, keyword tags, articles) as separate react components which are rendered by the parent.

This has finally been completed. Had a bit of a learning curve getting the child to communicate with the parents. This can be done by handing the child the name of a callback function as part of its props. When an event is triggered in the child, it runs this callback function, which runs in the parent and can use all of the data that is present in the parent.

Also had an issue with the asynchronous nature of this.setState(). Wanted to run a function after running this.setState, but the function was always returning the old value of the state. I actually tried a lot of different ways to overcome this, including by using the componentDidUpdate() function which I thought would works since the function would only then run after a rerender. It actually led to an update loop, since each of the functions were calling a new render, and so the updates just kept on looping.

I tried using setState().then, but apparently it was not a promise so this did not work. The solution turned out to be really simple! setState() can take a callback function as an argument to run once it completes. So simple and makes sense! So setState actually looks like setState(val, callback()).

So now all the functions working well, and code is modularised and clean. Need to tidy some part of the counting function, as it is counting words like ‘The’ and ‘the’ as different words. Probably need to add some kind of .toLowerCase() method in their to clear that up. Also it is counting bullet point as a word!

Will work on that tomorrow.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s