8.4 KiB
8.4 KiB
| id | title | challengeType | isRequired | videoUrl | localeTitle |
|---|---|---|---|---|---|
| 5a24c314108439a4d403618a | Use Array.map() to Dynamically Render Elements | 6 | false | استخدم Array.map () Dynamically Render Elements |
Description
Array.map() في Array.map() يوضح هذا المفهوم. على سبيل المثال ، يمكنك إنشاء تطبيق "قائمة المهام" البسيط. كمبرمج ، ليس لديك طريقة لمعرفة عدد العناصر التي قد يكون لدى المستخدم في قائمته. تحتاج إلى إعداد المكون الخاص بك لعرض العدد الصحيح لعناصر القوائم بشكل ديناميكي قبل أن يقرر شخص ما يستخدم البرنامج اليوم أن يكون يوم الغسيل. Instructions
MyToDoList تم إعداده. يجب أن يبدو بعض هذا الرمز مألوفًا إذا أكملت تحديًا للنموذج المتحكم فيه. ستلاحظ textarea و button ، جنبا إلى جنب مع اثنين من الأساليب التي تتبع ولاياتهم، ولكن يتم تقديم أي شيء للالصفحة إلى الآن. داخل constructor ، إنشاء this.state الكائن وتحديد دولتين: userInput يجب تهيئة باعتبارها سلسلة فارغة، و toDoList يجب تهيئة كصفيف فارغة. بعد ذلك ، قم بحذف التعليق في طريقة العرض render() بجوار متغير items . في مكانها، خريطة على toDoList مجموعة المخزنة في الحالة الداخلية للمكون حيوي وتجعل من li لكل عنصر. حاول إدخال سلسلة eat, code, sleep, repeat في textarea ، ثم انقر فوق الزر وشاهد ما يحدث. ملاحظة: قد تعرف أن جميع العناصر الفرعية التابعة التي تم إنشاؤها بواسطة عملية تعيين مثل هذه تحتاج إلى أن يتم توفيرها بسمة key فريدة. لا تقلق ، هذا هو موضوع التحدي التالي. Tests
tests:
- text: يجب أن يوجد مكون MyToDoList ثم تقديم إلى الصفحة.
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: يجب أن يكون الطفل الأول من <code>MyToDoList</code> عنصر <code>textarea</code> .
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: يجب أن يكون الطفل الثالث من <code>MyToDoList</code> عنصر <code>button</code> .
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: حالة <code>MyToDoList</code> يجب تهيئة مع <code>toDoList</code> كصفيف فارغة.
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: حالة <code>MyToDoList</code> يجب تهيئة مع <code>userInput</code> باعتبارها سلسلة فارغة.
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: ''
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."); }; '
Challenge Seed
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>
);
}
};
After Test
console.info('after the test');
Solution
// solution required