Handling State and Props in React without Hooks

Handling state in React is one of my favorite aspects of the framework!
Understanding what state is and how to pass it from component to component is one of the big ways React is simplifying web development.

this.state = {}
What is state?
State is the current value of a defined JavaScript object. When you create a component in React you can define the state of multiple JS objects and then change them later with some JavaScript magic!

this.state.[object]
To use the state that you’ve declared just use the normal JavaScript syntax within your HTML.
The example below sets the inner text of the div to an empty string.

this.setState()
Here’s the JavaScript magic! setState() is a built-in function that allows us to change the state of our JS object that was previously defined.
You can write the JavaScript that you would normally write to update a variable; however, with this one you’ll just call the setState() function to update state within your component.
In the example below we can see that whenever we click the button it fires a function called ‘handleClick’. Inside of this function we see setState() being called. This changes the state of ‘item’ from an empty string to ‘Hello’.

Passing Props
<Component props={this.state.item} />
Passing props (properties) is a HUGE concept to understand when working with a component based project. In general it’s a pretty easy concept to get started but can get more and more complicated the deeper you get with nested components.
To pass props to a component just add a property to the component wherever it’s called in your parent component. We’ll look at how to use the props in the next section.

this.props
Utilizing props in your component is as easy as using a variable.
You can use a variable to declare your props or you can deconstruct the props.
If you’re only passing one variable then it’s okay to just use ‘this.props.item’, but it’s going to be much better to deconstruct if you’re passing multiple props.

I hope that you’re interested to dive deeper in to using state in React because this for sure isn’t all of it! But I think it’s a good introduction!

Tip or Quote from Brandon:
Today I have a quote!

This is my own quote, so I guess I’ll explain a little. The main message is that you should always be aware of who you’re surrounding yourself with. I mostly use this to try and motivate my band students to practice, listen to professionals, and actively try to get better.
Obviously, there are exceptions, but I believe the general idea is true. If you only see what’s around you as ‘good’ then you’ll never try to be better. Or worse, you’ll try to be better but it’s only a little better.

Related posts:

If you came to this site, you already know what Postcrossing is and what this system of exchanging postcards worldwide is for. Why should you join other participants, and what benefits can you get…

Any one else married out there? In a committed relationship? Dating? Relationships are beautiful configurations, but anyone can tell you that they take work, willingness, trust, risk…and many more…