Please tell me what's wrong here

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?

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

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

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?

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

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 ;

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

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

3 Likes

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…

Semicolons are optional in JS :wink:

Also valid:

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