Please tell me what's wrong here

react
1

Hi guys, so I am following the react meteor tutorial. I am right in the beginning at chapter 2 Components.

Now this is the code I wrote for App.jsx

import React, { Component } from 'react'

import Task from './Task.jsx'

// App component -represents the whole App

export default class App extends Component {
  getTasks () {
    return [
    { _id: 1, text: 'This is task 1'},
    { _id: 2, text: 'This is task 2'},
    { _id: 3, text: 'This is task 3'}
    ]
  }

  renderTasks () {
    return this.getTasks().map((task) => {
      <Task key={task._id} task={task} />
    })
  }

  render () {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    )
  }
} // Component

And here is the one given in the tutorial

import React, { Component } from 'react';

import Task from './Task.jsx';

// App component - represents the whole app
export default class App extends Component {
  getTasks() {
    return [
      { _id: 1, text: 'This is task 1' },
      { _id: 2, text: 'This is task 2' },
      { _id: 3, text: 'This is task 3' },
    ];
  }

  renderTasks() {
    return this.getTasks().map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

Now the app does not work with the code written by me (the first one), however I can’t see any major difference between these 2 codes why would the second one work and the other one , not?

2

What error do you get in your browser console? It would be helpful to post that as well.

3

No error, the tasks just don’t render and that’s it.

4

By not render do you mean the entire page or just the list? If you can see the heading <h1>Todo List</h1> but not the list then it means the issue is in the Task.js file. Can you share the contents of that file?

5

I can see the h1.
This is the Task.jsx

import React, { Component, PropTypes } from 'react'

// Task component - represents a single todo item
export default class Task extends Component {
  render () {
    return (
      <li>{this.props.task.text}</li>
    )
  }
}

Task.propTypes = {
  // This component gets the task to dipslay through a React prop.
  // We can use propTypes to indicate it is required
  task: PropTypes.object.isRequired
}

But I don’t think the problem is in the Task file because the issue is resolved if I just copy the code of App.jsx from tutorial and put it instead of my App.jsx

6

OH in that case … guess what you missed the semicolons on the import statements; first two lines of your code. :blush:

 import React, { Component } from 'react'  // missing ;

 import Task from './Task.jsx' // missing ;
7

Alas no it works without semicolons as well, moreover I got a js lint warning about these semicolons being extra.

8

Your renderTasks() return statement has curly braces { } instead of parenthesis ( )

3 Likes
9

Into the renderTasks you need another return statement. Something like that:

…
renderTasks() { return this.getTasks().map((task) => { return <Task key={task._id} task={task} /> }); }

You can replace return keyword by ( ) parenthesis, like the tutorial does if you can…

10

Semicolons are optional in JS :wink:

Also valid:

return this.getTasks().map((task) => 
  <Task key={task._id} task={task} />
);