React - Use to Dynamically Render Elements

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) {
    // 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(',');
      toDoList: itemsArray
  handleChange(e) {
  render() {
    const items = null; // Change this line
    return (
          placeholder='Separate Items With Commas'
        <br />
        <button onClick={this.handleSubmit}>Create List</button>
        <h1>My "To Do" List:</h1>

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 to Dynamically Render Elements

Link to the challenge:

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 = => (<h2>{name}</h2>));

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

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