Embedded Files
A React component can access dynamic information in two ways: props and state.
Unlike props, a component’s state is not passed in from the outside. A component decides its own state.
To make a component have state, give the component a state property. This property should be declared inside of a constructor method, like this:
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { mood: 'decent' };
}
render() {
return <div></div>;
}
}
<Example />
Whoa, a constructor method? super(props)? What’s going on here? Let’s look more closely at this potentially unfamiliar code:
constructor(props) {
super(props);
this.state = { mood: 'decent' };
}
this.state should be equal to an object, like in the example above. This object represents the initial “state” of any component instance. We’ll explain that more soon!
How about the rest of the code? constructor and super are both features of ES6, not unique to React. There is nothing particularly React-y about their usage here. A full explanation of their functionality is outside of the scope of this course, but we’d recommend familiarizing yourself. It is important to note that React components always have to call super in their constructors to be set up properly.
Look at the bottom of the highest code example in this column. <Example /> has a state, and its state is equal to { mood: 'decent' }.
Instructions
Instructions
1.In App.js, starting on line 6, add a constructor method to the App component class. Give your constructor method a single parameter, named props. Use the example code as a guide.
Inside of the body of your constructor method, call super(props). On a new line, still inside the body of your constructor, declare a new property named this.state. Again, feel free to refer to the example code.
this.state should be equal to the following object:
{ title: 'Best App' }
Make sure not to separate constructor and render with a comma! Methods should never be comma-separated, if inside of a class body. This is to emphasize the fact that classes and object literals are different.
App.js
App.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
// constructor method begins here:
render() {
return (
<h1>
Wow this entire app is just an h1.
</h1>
);
}
}
Page updated
Report abuse