162 lines
8.6 KiB
Markdown
162 lines
8.6 KiB
Markdown
---
|
|
id: 5a24c314108439a4d403618a
|
|
title: Use Array.map() to Dynamically Render Elements
|
|
challengeType: 6
|
|
isRequired: false
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
Conditional rendering is useful, but you may need your components to render an unknown number of elements. Often in reactive programming, a programmer has no way to know what the state of an application is until runtime, because so much depends on a user's interaction with that program. Programmers need to write their code to correctly handle that unknown state ahead of time. Using <code>Array.map()</code> in React illustrates this concept.
|
|
For example, you create a simple "To Do List" app. As the programmer, you have no way of knowing how many items a user might have on their list. You need to set up your component to <em><strong>dynamically render</strong></em> the correct number of list elements long before someone using the program decides that today is laundry day.
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
The code editor has most of the <code>MyToDoList</code> component set up. Some of this code should look familiar if you completed the controlled form challenge. You'll notice a <code>textarea</code> and a <code>button</code>, along with a couple of methods that track their states, but nothing is rendered to the page yet.
|
|
Inside the <code>constructor</code>, create a <code>this.state</code> object and define two states: <code>userInput</code> should be initialized as an empty string, and <code>toDoList</code> should be initialized as an empty array. Next, delete the comment in the <code>render()</code> method next to the <code>items</code> variable. In its place, map over the <code>toDoList</code> array stored in the component's internal state and dynamically render a <code>li</code> for each item. Try entering the string <code>eat, code, sleep, repeat</code> into the <code>textarea</code>, then click the button and see what happens.
|
|
<strong>Note:</strong> You may know that all sibling child elements created by a mapping operation like this do need to be supplied with a unique <code>key</code> attribute. Don't worry, this is the topic of the next challenge.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: The MyToDoList component should exist and render to the page.
|
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').length === 1; })(), 'The MyToDoList component should exist and render to the page.');
|
|
- text: The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.
|
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(0).type() === 'textarea'; })(), 'The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.');
|
|
- text: The third child of <code>MyToDoList</code> should be a <code>button</code> element.
|
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(2).type() === 'button'; })(), 'The third child of <code>MyToDoList</code> should be a <code>button</code> element.');
|
|
- text: The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.
|
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })(), 'The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.');
|
|
- text: The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.
|
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === 'string' && initialState.userInput.length === 0; })(), 'The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.');
|
|
- text: When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.
|
|
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find(''ul'').find(''li''))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "testA, testB, testC"))}; const click = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "t1, t2, t3, t4, t5, t6"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === ''testA testB testC'' && awaited_state_3.text === ''t1 t2 t3 t4 t5 t6'', ''When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.''); }; '
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='jsx-seed'>
|
|
|
|
```jsx
|
|
const textAreaStyles = {
|
|
width: 235,
|
|
margin: 5
|
|
};
|
|
|
|
class MyToDoList extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
// change code below this line
|
|
|
|
// change code above this line
|
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
this.handleChange = this.handleChange.bind(this);
|
|
}
|
|
handleSubmit() {
|
|
const itemsArray = this.state.userInput.split(',');
|
|
this.setState({
|
|
toDoList: itemsArray
|
|
});
|
|
}
|
|
handleChange(e) {
|
|
this.setState({
|
|
userInput: e.target.value
|
|
});
|
|
}
|
|
render() {
|
|
const items = null; // change code here
|
|
return (
|
|
<div>
|
|
<textarea
|
|
onChange={this.handleChange}
|
|
value={this.state.userInput}
|
|
style={textAreaStyles}
|
|
placeholder="Separate Items With Commas" /><br />
|
|
<button onClick={this.handleSubmit}>Create List</button>
|
|
<h1>My "To Do" List:</h1>
|
|
<ul>
|
|
{items}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
### After Test
|
|
<div id='jsx-teardown'>
|
|
|
|
```js
|
|
ReactDOM.render(<MyToDoList />, document.getElementById('root'))
|
|
```
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
|
|
```js
|
|
const textAreaStyles = {
|
|
width: 235,
|
|
margin: 5
|
|
};
|
|
|
|
class MyToDoList extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
toDoList: [],
|
|
userInput: ''
|
|
}
|
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
this.handleChange = this.handleChange.bind(this);
|
|
}
|
|
handleSubmit() {
|
|
const itemsArray = this.state.userInput.split(',');
|
|
this.setState({
|
|
toDoList: itemsArray
|
|
});
|
|
}
|
|
handleChange(e) {
|
|
this.setState({
|
|
userInput: e.target.value
|
|
});
|
|
}
|
|
render() {
|
|
const items = this.state.toDoList.map( (item, i) => {
|
|
return <li key={i}>{item}</li>
|
|
});
|
|
return (
|
|
<div>
|
|
<textarea
|
|
onChange={this.handleChange}
|
|
value={this.state.userInput}
|
|
style={textAreaStyles}
|
|
placeholder="Separate Items With Commas" /><br />
|
|
<button onClick={this.handleSubmit}>Create List</button>
|
|
<h1>My "To Do" List:</h1>
|
|
<ul>
|
|
{items}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
```
|
|
|
|
</section>
|