REACT: Use Array.map() to Dynamically Render Elements

JavaScript
1

Hi, I’m stuck on this React challenge.

When I want to run the tests nothing actually happens, the page doesn’t even throw error messages. Am I missing anything, please? Thank you, guys! :slight_smile:

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 = {
  toDoList = [],
  userInput = ""
}
    // 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(item => <li>{item}</li> );
    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; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/use-array-map-to-dynamically-render-elements/

2

Make sure you are using correct assignments inside your object. Instead of using = operators use :

1 Like
3

noo, such a stupid thing, I totally overlooked that! thanks a lot! :slight_smile:

5

Thank you very much, that will come in handy! :slight_smile:

6

I just wanted to say I logged in so I could say that I did the exact same thing - your question (and the answer) is a lifesaver :slight_smile:

7

I’m working on this challenge. When I go to map the array stored in this.state.toDoList, it renders the correct number of li’s but the text of each one is just ‘e’. Is there something wrong with my map function?

 const items = this.state.toDoList.map(function(e){
      return <li>e</li>
    })

It’s like it’s treating e as a string instead of the element in the array.

Full code:

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 list =this.state.toDoList
    console.log(list)
    const items = this.state.toDoList.map(function(e){
      return <li>e</li>
    })
    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>
    );
  }
};
8

oh you have to wrap the ‘e’ in curly braces. Tripped me up because the map function isn’t inside the return statement, even though that’s where the li is being rendered