if/else
statement in the render()
method of a React component.
boolean
in its state which tracks whether you want to display some element in the UI or not. The button
toggles the state of this value. Currently, it renders the same UI every time. Rewrite the render()
method with an if/else
statement so that if display
is true
, you return the current markup. Otherwise, return the markup without the h1
element.
Note: You must write an if/else
to pass the tests. Use of the ternary operator will not pass here.
MyComponent
should exist and render.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length === 1; })(), 'MyComponent
should exist and render.');
- text: When display
is set to true
, a div
, button
, and h1
should render.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 2 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 1, ''When display
is set to true
, a div
, button
, and h1
should render.''); }; '
- text: When display
is set to false
, only a div
and button
should render.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 1 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 0, ''When display
is set to false
, only a div
and button
should render.''); }; '
- text: The render method should use an if/else
statement to check the condition of this.state.display
.
testString: getUserInput => assert(getUserInput('index').includes('if') && getUserInput('index').includes('else'), 'The render method should use an if/else
statement to check the condition of this.state.display
.');
```