Use-arraymap-to-dynamically-render-elements

JavaScript
#1

Tell us what’s happening:
I don’t know what’s the meaning of "dynamically return an unordered list ".

Your code so far


const textAreaStyles = {
  width: 235,
  margin: 5
};

class MyToDoList extends React.Component {
  constructor(props) {
    super(props);
    // change code below this line
this.state = {
  userInput : '',
  toDoList : []
}
    // 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 = this.state.toDoList.map(function(item,index){
      return <li key={index}> {item} </li>
    }).sort(()=>(parseInt(Math.random()-1)))
    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>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36.

Link to the challenge:

#2

To be dynamic means to always be changing. A person who moves around a lot, is loud, or changes themselves frequently is a dynamic person. The opposite of this is to be static, or unchanging. A static person doesn’t move around much and is quiet.

In programming, when we talk about static things, we generally mean that the input is set. A simple web page is static because the code doesn’t change. An example of a static site is the portfolio project.

Dynamic code means that it has to change based on the input. It’s always changing, and two people may not even see the exact same output. An example of a dynamic app is the weather app. What you see depends on your location.

in this case, the app is a ToDo list. Each user will have a different list of things they need to do, so in order to display the items, the code needs to dynamically generate a list.

const items = this.state.toDoList.map(function(item,index){
      return <li key={index}> {item} </li>  // each item in the todo list will be put into a <li> element
    }).sort(()=>(parseInt(Math.random()-1)))

Hope this helps.

#3

thanks for your patient reply.I think the “map” function dynamically generate a list.But now.the test is passed.I don’t know what happened.I think it was my feedback that was answered.:astonished:

#4

Hi, I have written this using arrow function but why it is not passing the test.
Here is my code, the code is working fine and producing output
const items = this.state.toDoList.map((key) => <li>{key}</li>);

#5

Finally got it
const items = this.state.toDoList.map((item) => <li key={item.toString()}>{item}</li>);

#6

In my opinion, it is cleaner and shorter to pass that loop exactly where it happens, and scratch the const items, like so:

render() {
    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>
          {this.state.toDoList.map(item=>
      <li>{item}</li>
    )}
        </ul>
      </div>
    );
  }
};
#7