I'm currently trying to follow the great Traversy media page and I'm writing some code in react. I keep getting "Hello" in the console instead of the array "ID," and I cant figure out why. I have 3 files I'm working from, TodoItems.js, Todos.js, and App.js, and of course index.js which houses the root div to display everything. Any help would be appreciated! Here is my code:
TodoItem.js:
import React, { Component } from 'react'
import propTypes from 'prop-types';
export class TodoItem extends Component {
getStyle = () => {
return {
background: 'gray',
padding: '10px',
borderBottom: '1px #ccc dotted',
textDecoration: this.props.todo.completed ?
'line-through' : 'none'
}
}
render() {
const { id, title } = this.props.todo;
return (
<div style ={this.getStyle()}>
<p>
<input type="checkbox" onChange={this.props.markComplete.bind(this, id)} /> {' '}
{ title }</p>
</div>
)
}
}
TodoItem.propTypes = {
todo: propTypes.object.isRequired
}
export default TodoItem
Todos.js:
import React, { Component } from 'react';
import TodoItem from './TodoItem';
import propTypes from 'prop-types';
class Todos extends Component {
render() {
return this.props.todos.map((todo) => (
));
}
}
Todos.propTypes = {
todos: propTypes.array.isRequired
}
export default Todos;
App.js:
import React, { Component } from 'react';
import Todos from './components/Todos';
import './App.css'
class App extends Component {
state = {
todos: [
{
id: 1,
title: 'Take out trash',
completed: false
},
{
id: 2,
title: 'Dinner with gf',
completed: false
},
{
id: 3,
title: 'Meeting with Boss',
completed: false
}
]
}
markComplete = (id) => {
console.log(id)
}
render() {
return (
<div className="App">
<Todos todos={this.state.todos} markComplete={this.markComplete}/>
</div>
)
}
}
export default App;
Top comments (4)
I'm not seeing 'Hello" anywhere in your code, are you sure you're running the app from the right directory?
Yes. Definitely.
The problem has been fixed, I think it had to do with the cache. Thank you
Here is a screenshot:
Some comments may only be visible to logged-in visitors. Sign in to view all comments.