, two core concepts in React that we'll use in every React application.

) that you pass into your components and 

 stores "component-local data". Let's look at an example to make it concrete:

 component that includes a title. The code might look something like this:

class Header extends React.Component {
  render() {
    return (<h1>A title</h1>)
  }
}

 component in multiple parts of our app. Of course, not every header in our application will have the exact text 

It's not convenient to update our component's template directly every time we want a new 

 Instead, let's provide the component the header text (the 

React allows us to send data to a component using the same syntax as HTML: using attributes or 

 tag. We can consider the property of the 

 that we are setting on a component called 

We can access these properties inside a component using 

 our component. For example, let's update our 

 component so that we can reuse in multiple places.

class Header extends React.Component {
  render() {
    return <h1>{this.props.title}</h1>
  }
}

 as an attribute to have a dynamic value show up:

<Header title="Home" />


<h1>Home</h1>

<Header title="Inbox" />


<h1>Inbox</h1>

We can pass more than just strings in a component: can pass 

What if we want to change something in our component 

 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 

 status for a user in a chat or updating a timer on a stopwatch.

 as much as we can (that is, pass the data value down from a parent component), sometimes we need to store the 

 state of a component, within the component itself. To handle this, React gives us the ability to define (and update) it's 

completely internal to the individual component

 by the component and any children it creates). Similar to how we access 

, the component re-renders (we change state using a special function 

Let's build a stateful clock component using this idea. In order to create a stateful component, 

 we have a stateful component. We do this by assigning a variable called 

Usually, we'll handle this in the constructor of the class, like so:

class Clock extends React.Component {
  constructor(props) {
    super(props); // We always need this line
    this.state = { time: new Date() }
  }
  render() {
    // ...
  }
}

 available in the component, we can use it in our 

 function. Let's show the current time (from our 

render() {
  return (
    <div>{ this.state.time.toString() }</div>
  )
}

We'll need a way to update the time in our 

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 

. 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 

  // lifecycle hook function
  componentDidMount() {
    this.updateClock()
  }  
  updateClock() {
    this.timerId = setTimeout(() => {
      this.setState({
        time: new Date()
      })
    }, 1000)
  }

the complete, runnable example in jsbin here

In 1000 milliseconds (1 second), our timeout will fire, which in turn calls 

 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 

 function accepts a function it will call after the state is updated we can define in the second argument.

  updateClock() {
    this.timerId = setTimeout(() => {
      this.setState({
        time: new Date()
      // reset the timeout after state updates
      }, this.updateClock)
    }, 1000)
  }

That's it. Now we have a fully stateful component which we can use inside the 

, we can start building more complex applications.

A lot of folks ask, "what if I need to use the 

 in the calculation for the next state?" In that case, you need to use a special form of 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Props and state of React</h1><p>Let's talk a bit about <code>props</code> and <code>state</code>, two core concepts in React that we'll use in every React application.</p><p>The short of it is, <code>props</code> are like the "arguments" (or <em>properties</em>) that you pass into your components and <code>state</code> stores "component-local data". Let's look at an example to make it concrete:</p><p>Let's say that we have a <code>&lt;Header /&gt;</code> component that includes a title. The code might look something like this:</p><textarea data-iscodemirror="true" data-mode="text/javascript" data-uniqueid="cm-6JstdRvNyZLJ8ddUkxd-O" id="cm-6JstdRvNyZLJ8ddUkxd-O">class Header extends React.Component {
  render() {
    return (&lt;h1&gt;A title&lt;/h1&gt;)
  }
}</textarea><p>We want to reuse our <code>&lt;Header /&gt;</code> component in multiple parts of our app. Of course, not every header in our application will have the exact text <code>A title</code>, like this one. </p><p><strong>It's not convenient to update our component's template directly every time we want a new <code>h1</code> title.</strong> Instead, let's provide the component the header text (the <em>title</em>) as an "argument".</p><h2 class="heading-anchor-text" id="props"><span>props</span><a class="d-inline" href="#props">#</a></h2><p>React allows us to send data to a component using the same syntax as HTML: using attributes or <em>properties</em>. This is similar to passing the <code>src</code> attribute to an <code>&lt;img /&gt;</code> tag. We can consider the property of the <code>&lt;img /&gt;</code> tag as a <code>prop</code> that we are setting on a component called <code>img</code>.</p><p>We can access these properties inside a component using <code>this.props</code> from anywhere <em>inside</em> our component. For example, let's update our <code>&lt;Header /&gt;</code> component so that we can reuse in multiple places.</p><textarea data-iscodemirror="true" data-mode="text/javascript" data-uniqueid="cm-cM59qsZa-Z3_MYxjqWzGj" id="cm-cM59qsZa-Z3_MYxjqWzGj">class Header extends React.Component {
  render() {
    return &lt;h1&gt;{this.props.title}&lt;/h1&gt;
  }
}</textarea><p>Now we can use the <code>&lt;Header /&gt;</code> component and pass a <code>title</code> as an attribute to have a dynamic value show up:</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-7vkcZhE7M82F6s9d_09PR" id="cm-7vkcZhE7M82F6s9d_09PR">&lt;!-- on the homepage --&gt;
&lt;Header title="Home" /&gt;

&lt;!-- this would render as: --&gt;
&lt;h1&gt;Home&lt;/h1&gt;</textarea><p>or on the inbox page:</p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-cqQifC93vGBZbBKRsHRT6" id="cm-cqQifC93vGBZbBKRsHRT6">&lt;!-- on the inbox page --&gt;
&lt;Header title="Inbox" /&gt;

&lt;!-- this would render as: --&gt;
&lt;h1&gt;Inbox&lt;/h1&gt;</textarea><p>We can pass more than just strings in a component: can pass <strong>numbers</strong>, <strong>arrays</strong>, <strong>objects</strong>, and even <strong>functions</strong>!</p><h2 class="heading-anchor-text" id="the-state-of-things"><span>The <code>state</code> of things</span><a class="d-inline" href="#the-state-of-things">#</a></h2><p>What if we want to change something in our component <em>after the props have already been set</em>? React does <em>not</em> allow us to modify <code>this.props</code> on our components (because it can introduce data consistency issues).</p><p>Sometimes a component needs to be able to update it's own data. For example, setting an <code>active</code> status for a user in a chat or updating a timer on a stopwatch.</p><p>While it's preferable to use <code>props</code> as much as we can (that is, pass the data value down from a parent component), sometimes we need to store the <em>local</em> state of a component, within the component itself. To handle this, React gives us the ability to define (and update) it's <code>state</code>.</p><p>The <code>state</code> in a component is intended to be <strong>completely internal to the individual component</strong> and it's children (i.e. accessed <em>only</em> by the component and any children it creates). Similar to how we access <code>this.props</code>, the state can be accessed via <code>this.state</code> in a component.</p><p>Whenever the state <em>changes</em>, the component re-renders (we change state using a special function <code>this.setState()</code>, more on that in a moment).</p><p>Let's build a stateful clock component using this idea. In order to create a stateful component, <strong>we have to tell React</strong> we have a stateful component. We do this by assigning a variable called <code>state</code> on the component.</p><p>Usually, we'll handle this in the constructor of the class, like so:</p><textarea data-iscodemirror="true" data-mode="text/javascript" data-uniqueid="cm-lTMGOX3vddZpZbUss4ze3" id="cm-lTMGOX3vddZpZbUss4ze3">class Clock extends React.Component {
  constructor(props) {
    super(props); // We always need this line
    this.state = { time: new Date() }
  }
  render() {
    // ...
  }
}</textarea><p>Now that we have the <code>state</code> available in the component, we can use it in our <code>render</code> function. Let's show the current time (from our <code>state</code>) in our <code>render()</code> function:</p><textarea data-iscodemirror="true" data-mode="text/javascript" data-uniqueid="cm-fWWjrv3Fpw8q4TaTvDJsa" id="cm-fWWjrv3Fpw8q4TaTvDJsa">render() {
  return (
    &lt;div&gt;{ this.state.time.toString() }&lt;/div&gt;
  )
}</textarea><p>We'll need a way to update the time in our <code>state</code> object once every second.</p><blockquote data-block-type="information" class="information annotated"><p>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 <em>lifecycle hooks</em>. We'll skip over looking at these in detail to focus on <code>state</code> for now.</p></blockquote><p>Let's set this up so that we have a timer that fires in one second and updates the <code>state</code> in our component:</p><textarea data-iscodemirror="true" data-mode="text/javascript" data-uniqueid="cm-uVQT-hNg19p-7JzcKWlmJ" id="cm-uVQT-hNg19p-7JzcKWlmJ">  // lifecycle hook function
  componentDidMount() {
    this.updateClock()
  }  
  updateClock() {
    this.timerId = setTimeout(() =&gt; {
      this.setState({
        time: new Date()
      })
    }, 1000)
  }</textarea><p>Checkout <a href="https://jsbin.com/giwipe/2/edit?js,output" rel="noopener noreferrer nofollow">the complete, runnable example in jsbin here</a>.</p><p>In 1000 milliseconds (1 second), our timeout will fire, which in turn calls <code>this.setState()</code> on the component and React automatically re-renders our component.</p><p>We'll want to make sure the timeout gets fired on an interval, so every second the state is updated. The <code>this.setState()</code> function accepts a function it will call after the state is updated we can define in the second argument.</p><textarea data-iscodemirror="true" data-mode="text/javascript" data-uniqueid="cm-L83eVkhUMti1HXfqljtZ9" id="cm-L83eVkhUMti1HXfqljtZ9">  updateClock() {
    this.timerId = setTimeout(() =&gt; {
      this.setState({
        time: new Date()
      // reset the timeout after state updates
      }, this.updateClock)
    }, 1000)
  }</textarea><p>That's it. Now we have a fully stateful component which we can use inside the <code>&lt;Clock /&gt;</code> component.</p><p>Now, that we have walked through <code>props</code> and <code>state</code>, we can start building more complex applications.</p><p>A lot of folks ask, "what if I need to use the <em>current state</em> in the calculation for the next state?" In that case, you need to use a special form of <em>setState</em> -- we talk about it <a href="https://fullstackreact.com" rel="noopener noreferrer nofollow">i</a><a href="https://www.newline.co/fullstack-react/" rel="noopener noreferrer nofollow">n our book Fullstack React.</a></p><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Props and state of React

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript