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.