scrimba

React Todo App: Phase 4

by Bob Ziroll

About

Comments

Notes

React Todo App: Phase 4

by Bob Ziroll

Expand for more info

App.js

run

preview

console

/*
In the previous iteration of this todo list app, we pulled in todos data from a JSON file and mapped over it to display the todo items.

Eventually we'll want to be able to modify the data, which will only happen if we've "loaded" the data in to the component's state

Challenge: Change the <App /> component into a stateful class component and load the imported `todosData` into state.
*/

import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"

function App() {
    const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)
    
    return (
        <div className="todo-list">
            {todoItems}
        </div>
    )
}

export default App

In the previous iteration of this todo list app, we pulled in todos data from a JSON file and

mapped over it to display the todo items.

Eventually we'll want to be able to modify the data, which will only happen if we've "loaded" the

data in to the component's state

Challenge: Change the <App /> component into a stateful class component and load the imported

`todosData` into state.

import React from "react"

import TodoItem from "./TodoItem"

import todosData from "./todosData"

function App() {

const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)

return (

{todoItems}

</div>

)

}

"Warning: Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. in input (created by TodoItem) in div (created by TodoItem) in TodoItem (created by App) in div (created by App) in App"

-2:01