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

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

#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 :


#3

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


#4

Oh it was throwing errors in the browser console. Typically when you click Run Tests and nothing seems to happen, you probably have created an error which can view in the browser’s console.log (Ctrl+Shft+ J in Chrome). When I ran your code, I saw the following error in the console.

SyntaxError: unknown: Unexpected token (11:11)
9 | // change code below this line
10 | this.state = {

11 | toDoList = [],
| ^
12 | userInput = “”
13 | }
14 | // change code above this line


#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: