React - Use Array.map() to Dynamically Render Elements

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

I was wondering If I can initialise my toDoList with userInput , I attempted many times and I couldn’t end this challenge. Could you please tell me how I can sort it out. Thank you.

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 = null; // Change this line
    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 (iPhone; CPU iPhone OS 15_7_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.4 Mobile/15E148 Safari/604.1

Challenge: React - Use Array.map() to Dynamically Render Elements

Link to the challenge:

2

Call map on the toDoList array and inside the callback return an <li> element with the content of the toDoList array.

As an example, say you had an array of user names.

this.state = {
  userNames: ['John', 'Jack']
}

And you wanted to map them inside h2 elements.

const names = this.state.userNames.map((name) => (<h2>{name}</h2>));
3

@lasjorg thank you! I’ve solved the problem :pray:t4:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.