DEV Community

Code4ever553
Code4ever553

Posted on

I keep getting "hello" in the console, and not the "ID" I would expect.

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)

Collapse
 
fetchworkglenn profile image
Glenn

I'm not seeing 'Hello" anywhere in your code, are you sure you're running the app from the right directory?

Collapse
 
code4ever553 profile image
Code4ever553 • Edited

Yes. Definitely.

Collapse
 
code4ever553 profile image
Code4ever553

The problem has been fixed, I think it had to do with the cache. Thank you

Collapse
 
code4ever553 profile image
Code4ever553 • Edited

Here is a screenshot:

Some comments may only be visible to logged-in visitors. Sign in to view all comments.