// App.js
import React, { Component } from 'react';
import './App.css';
import ToDo from './projects/ToDo'
class App extends Component {
state = {
todoApp: [
{
id: 1234,
mission: 'Read a book',
completed: false
},
{
id: 9872,
mission: 'Watch a movie',
completed: false
},
{
id: 7389,
mission: 'Write the code',
completed: true
},
{
id: 5621,
mission: 'Play with kids',
completed: true
},
]
}
render() {
return (
<div className="App">
{ /* Component*/ }
<ToDo todoAP = {this.state.todoApp}/>
</div>
);
}
}
export default App;
/*
run:
1234 - Read a book - false
9872 - Watch a movie - false
7389 - Write the code - true
5621 - Play with kids - true
*/
// todo/src/projects/ToDo.js
import React, { Component } from 'react';
import ToDoItem from './ToDoItems';
import PropTypes from 'prop-types';
class ToDo extends Component {
render() {
return this.props.todoAP.map((td) => (
<ToDoItem key = {td.id} todo = {td}/>
));
}
}
ToDo.propTypes = {
todoAP: PropTypes.array.isRequired
}
export default ToDo;
// todo/src/projects/ToDoItems.js
import React, { Component } from 'react'
import PropTypes from 'prop-types';
// Component
export class ToDoItems extends Component {
setStyle = () => {
return {
backgroundColor: '#f3ff33',
textDecoration: this.props.todo.completed ? 'line-through' : 'none'
}
}
render() {
return (
<div style = { this.setStyle() } >
<h3>{`${this.props.todo.id} - ${this.props.todo.mission} -
${this.props.todo.completed}`}</h3>
</div>
)
}
}
ToDoItems.propTypes = {
todo: PropTypes.object.isRequired
}
export default ToDoItems