4.8 KiB
4.8 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036184 | Render with an If-Else Condition | 6 | false |
Description
if/else
statement in the render()
method of a React component.
Instructions
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.
Tests
tests:
- text: <code>MyComponent</code> should exist and render.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length === 1; })(), '<code>MyComponent</code> should exist and render.');
- text: When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> 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 <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.''); }; '
- text: When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> 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 <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.''); }; '
- text: The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.
testString: getUserInput => assert(getUserInput('index').includes('if') && getUserInput('index').includes('else'), 'The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.');
Challenge Seed
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
display: true
}
this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
this.setState({
display: !this.state.display
});
}
render() {
// change code below this line
return (
<div>
<button onClick={this.toggleDisplay}>Toggle Display</button>
<h1>Displayed!</h1>
</div>
);
}
};
After Test
ReactDOM.render(<MyComponent />, document.getElementById('root'))
Solution
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
display: true
}
this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
this.setState({
display: !this.state.display
});
}
render() {
// change code below this line
if (this.state.display) {
return (
<div>
<button onClick={this.toggleDisplay}>Toggle Display</button>
<h1>Displayed!</h1>
</div>
);
} else {
return (
<div>
<button onClick={this.toggleDisplay}>Toggle Display</button>
</div>
);
}
}
};