Putting functions into React Components

So it was a little harder to integrate all the features than I expected. The main function I have are:

  • Counting the frequency of all the words
  • A checkbox which (un)highlights all the keywords
  • A function to generate all the keyword tags
  • A function to highlight keywords when the keyword tag is clicked.

These have all been integrated so far actually, except the last one. Am writing each one as a separate react component.

It took me a while to get the checkbox working actually. I was having trouble understanding how to set its inital value as false, and how to update/read the value when the checkbox is ticked. It seemed the way to do this was by using the getInitialState() function on the component as below; ( and as in this post)

getInitialState() {
return { checked:false};},

setting the value=false as you would usually do on HTML element was not working. After that we set a function to run on onClick, and the state is updated again their by

this.setState({checked: true})

Was also getting confused because most of the online help was saying to add the initial value by using the constructor and super props like so:

constructor(props) { super(props); this.state = { };}

and in most of the help online the react components were written like so:

class Checkbox  extends React.Component{( )}

whereas my components are stated like so:

class Checkbox = React.createClass{()}

and depending on how you define the component, defines whether you use the InitalState or the constructor to set the initial variables. I found out they are both pretty similar except the extends React.Component method allows for better use with ES6 modules, and seems to be the newer better way to do things, so in future builds will go with that technique. For now will just stick with .createClass(). The difference between the two are explained well here.


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