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(/

TestName<\\/h1>/.test(firstValue), 'message: The rendered 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
\n \n

{this.state.name}

\n
\n );\n }\n};"