State, Props, and Event Handling in State React Components

Near the end of last week, the bootcamp that I am in had a 2 day sprint using React. Previous to this, we had been doing AJAX requests and a couple days of Backbone. React, of course, was a significantly different challenge. One of my favorite aspects of React compared to Backbone was that it had a very visual representation of the code that we were writing. React is empowered by JSX, a language that is very very close to HTML except that it allows JavaScript expressions, variables, and operations. Because JSX is not quite HTML and is not quite JavaScript either, it must be transpiled to Vanilla JavaScript. To do this, we used the Babel transpiler to transpile to ES5 JavaScript.

React was, on the other hand, not really easy to pick up. Of course it looks familiar to HTML but there are many deviations. For example, React has its own names for HTML attributes, event handlers, etc. This was a bit frustrating after being so interested in how easy React was to visualize compared to other options. Another difficult part to grasp was how React chose to listen for events. In React, the event handler is created, binded with a ‘this’ reference, and passed down from one child to the next on the props object. This was a bit different than I had seen before but I warmly welcomed it after the chaos that was Backbone event handling that week. Here is a quick example of a parent component having an interest in listening to a child component click event and passing it down to react to changes on that child component.

const AnimalImg = (props) => (
<div>
<h3 onClick={props.handleClick}>Burrito Cat</h3>
<img src={props.mySrc} />
</div>
);
class AnimalDisplay extends React.Component {
constructor() {
super();
this.state = {
toggleSrc: "https://c1.staticflickr.com/3/2873/9624067028_b2dc7eaac5_b.jpg"
}
}
handleClick () {
this.setState({toggleSrc: this.state.toggleSrc ? "" : "https://c1.staticflickr.com/3/2873/9624067028_b2dc7eaac5_b.jpg"});
}
render() {
return (
<div>
<AnimalImg mySrc={this.state.toggleSrc} handleClick={this.handleClick.bind(this)}/>
</div>
);
}
}
ReactDOM.render(<AnimalDisplay />, document.body);

If you would like to run the above segment of code, test it out in a React friendly version of JSFiddle (or other sandbox). Upon running this code, a cat will appear with a header above it. When the header is clicked, the cat picture will disappear. On a second click, the cat picture reappears. This then continues on as long as the user chooses to click. The reason for this is because the child component has a click handler as well as a variable storing the state of the toggleSrc prop from the parent component. When a click happens, the parent component handleClick function is called via the callback function provided to the child on props and attached on the <h3> element. When the callback is invoked, the state of the toggleSrc property is changed which causes a re-render to occur. Before this occurs, however, the value of the toggleSrc property has made it down to the child component. When the re-render occurs, the cat picture now takes a value of “” instead of “http://……” or vise-versa if it was not on the screen previously.

So to summarize a bit, props are an object of properties passed from a parent component to a child component. On props, we are able to attach various things for functionality, often most usefully, functions. This is how we pass down the click handler from the parent to the child component so that the parent can maintain an interest in a click event on that component’s element. To be able to pass this done and react according to events on the child, the parent component must be state. To be state means that the parent has to have a state object with the properties that will be able to change according to various events. In the example above, the parent component (AnimalDisplay) is state while the child component is stateless. The child component is kept stateless because there is no functionality required beyond its ability to render itself and it also does not have any properties that should be changed based on events.

Hopefully this short description gave you a decent if not brief introduction to the React library. If you have not checked it out, I highly suggest that you do since it seems fairly intuitive and visually follows a similar pattern to the language of the web: HTML. Until next time, happy coding!

If you have any questions, please leave them below and I will get back to you as soon as I can. Thanks for reading!