diff --git a/challenges/03-front-end-libraries/react.json b/challenges/03-front-end-libraries/react.json
index a4f3c8330e..7a46f98bec 100644
--- a/challenges/03-front-end-libraries/react.json
+++ b/challenges/03-front-end-libraries/react.json
@@ -1340,7 +1340,7 @@
"assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'Initial State', 'message: The state of MyComponent
should initialize with the key value pair { name: Initial State }
.');",
"assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1, 'message: MyComponent
should render an h1
header.');",
"async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'TestName' }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/
h1
header should contain text rendered from the component's state.'); };",
- "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'Before' }); return waitForIt(() => mockedComponent.state('name')); }; const second = () => { mockedComponent.setState({ name: 'React Rocks!' }); return waitForIt(() => mockedComponent.state('name')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 'Before' && secondValue === 'React Rocks!', 'message: Calling the handleClick
method on MyComponent
should set the name property in state to equal React Rocks!
.'); }; "
+ "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'Before' }); return waitForIt(() => mockedComponent.state('name')); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state('name')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 'Before' && secondValue === 'React Rocks!', 'message: Calling the handleClick
method on MyComponent
should set the name property in state to equal React Rocks!
.'); };"
],
"solutions": [
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'Initial State'\n };\n this.handleClick = this.handleClick.bind(this);\n }\n handleClick() {\n // change code below this line\n this.setState({\n name: 'React Rocks!'\n });\n // change code above this line\n }\n render() {\n return (\n