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

Code4ever553 — Fri, 20 Mar 2020 01:24:27 +0000

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;

DEV Community: Code4ever553

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