4.1 KiB
4.1 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036170 | Create a Stateful Component | 6 | false |
Description
state
. State consists of any data your application needs to know about, that can change over time. You want your apps to respond to state changes and present an updated UI when necessary. React offers a nice solution for the state management of modern web applications.
You create state in a React component by declaring a state
property on the component class in its constructor
. This initializes the component with state
when it is created. The state
property must be set to a JavaScript object
. Declaring it looks like this:
this.state = {
// describe your state here
} You have access to thestate
object throughout the life of your component. You can update it, render it in your UI, and pass it as props to child components. Thestate
object can be as complex or as simple as you need it to be. Note that you must create a class component by extendingReact.Component
in order to createstate
like this.
Instructions
name
property from its state
. However, there is no state
defined. Initialize the component with state
in the constructor
and assign your name to a property of name
.
Tests
tests:
- text: <code>StatefulComponent</code> should exist and render.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('StatefulComponent').length === 1; })(), '<code>StatefulComponent</code> should exist and render.');
- text: <code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1; })(), '<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.');
- text: The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && typeof initialState.name === 'string'); })(), 'The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.');
- text: The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })(), 'The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.');
Challenge Seed
class StatefulComponent extends React.Component {
constructor(props) {
super(props);
// initialize state here
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
</div>
);
}
};
After Test
ReactDOM.render(<StatefulComponent />, document.getElementById('root'))
Solution
class StatefulComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'freeCodeCamp!'
}
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
</div>
);
}
};