Use Array.map() to Dynamically Render Elements-timeout occur

JavaScript
1

Tell us what’s happening:

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){
      return<li>{item}</li>;
    }); // 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>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:

When running the test, I can’t pass the last requirement and it says// running tests Timeout has occurred // tests completed"

what does it mean??

2

You have changed the original code here:

this.setState={
toDoList: itemsArray
};

Reset the code, rewrite your solution ( which is correct ) and it should pass ^^

1 Like
3

Thanks! I passed it.

1 Like