Let's talk a bit about
state, two core concepts in React that we'll use in every React application.
The short of it is,
props are like the "arguments" (or properties) that you pass into your components and
state stores "component-local data". Let's look at an example to make it concrete:
Let's say that we have a
<Header /> component that includes a title. The code might look something like this:
We want to reuse our
<Header /> component in multiple parts of our app. Of course, not every header in our application will have the exact text
A title, like this one.
It's not convenient to update our component's template directly every time we want a new
h1 title. Instead, let's provide the component the header text (the title) as an "argument".
React allows us to send data to a component using the same syntax as HTML: using attributes or properties. This is similar to passing the
src attribute to an
<img /> tag. We can consider the property of the
<img /> tag as a
prop that we are setting on a component called
We can access these properties inside a component using
this.props from anywhere inside our component. For example, let's update our
<Header /> component so that we can reuse in multiple places.
Now we can use the
<Header /> component and pass a
title as an attribute to have a dynamic value show up:
or on the inbox page:
We can pass more than just strings in a component: can pass numbers, arrays, objects, and even functions!
state of things#
What if we want to change something in our component after the props have already been set? React does not allow us to modify
this.props on our components (because it can introduce data consistency issues).
Sometimes a component needs to be able to update it's own data. For example, setting an
active status for a user in a chat or updating a timer on a stopwatch.
While it's preferable to use
props as much as we can (that is, pass the data value down from a parent component), sometimes we need to store the local state of a component, within the component itself. To handle this, React gives us the ability to define (and update) it's
state in a component is intended to be completely internal to the individual component and it's children (i.e. accessed only by the component and any children it creates). Similar to how we access
this.props, the state can be accessed via
this.state in a component.
Whenever the state changes, the component re-renders (we change state using a special function
this.setState(), more on that in a moment).
Let's build a stateful clock component using this idea. In order to create a stateful component, we have to tell React we have a stateful component. We do this by assigning a variable called
state on the component.
Usually, we'll handle this in the constructor of the class, like so:
Now that we have the
state available in the component, we can use it in our
render function. Let's show the current time (from our
state) in our
We'll need a way to update the time in our
state object once every second.
React allows us to run functions at the different stages of a component while it's on a page. We refer to these functions as lifecycle hooks. We'll skip over looking at these in detail to focus on
Let's set this up so that we have a timer that fires in one second and updates the
state in our component:
In 1000 milliseconds (1 second), our timeout will fire, which in turn calls
this.setState() on the component and React automatically re-renders our component.
We'll want to make sure the timeout gets fired on an interval, so every second the state is updated. The
this.setState() function accepts a function it will call after the state is updated we can define in the second argument.
That's it. Now we have a fully stateful component which we can use inside the
<Clock /> component.
Now, that we have walked through
state, we can start building more complex applications.
A lot of folks ask, "what if I need to use the current state in the calculation for the next state?" In that case, you need to use a special form of setState -- we talk about it in our book Fullstack React.