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?
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?
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