Signed-off-by: Joseph Angelo Ferrer Barrozo <jabarrozo@gmail.com>pull/418/head
parent
da7f38c3e8
commit
06051db7b9
@ -1,49 +1,31 @@ |
||||
import React from "react"; |
||||
import React, { useState } from "react"; |
||||
|
||||
export default class TodoList extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
const TodoList = (props) => { |
||||
const { todos } = props; |
||||
const [activeIndex, setActiveIndex] = useState(0); |
||||
|
||||
this.state = { |
||||
activeIndex: 0, |
||||
}; |
||||
} |
||||
|
||||
handleActive(index) { |
||||
this.setState({ |
||||
activeIndex: index, |
||||
}); |
||||
} |
||||
|
||||
renderTodos(todos) { |
||||
return ( |
||||
return todos.length > 0 ? ( |
||||
<ul className="list-group"> |
||||
{todos.map((todo, i) => ( |
||||
{todos.map((todo, index) => ( |
||||
<li |
||||
className={ |
||||
"list-group-item cursor-pointer " + |
||||
(i === this.state.activeIndex ? "active" : "") |
||||
(index === activeIndex ? "active" : "") |
||||
} |
||||
key={i} |
||||
key={todo._id} // todos queried from the database have an _id value that is better used here than index
|
||||
onClick={() => { |
||||
this.handleActive(i); |
||||
setActiveIndex(index); |
||||
}} |
||||
> |
||||
{todo.text} |
||||
</li> |
||||
))} |
||||
</ul> |
||||
); |
||||
} |
||||
|
||||
render() { |
||||
let { todos } = this.props; |
||||
return todos.length > 0 ? ( |
||||
this.renderTodos(todos) |
||||
) : ( |
||||
<div className="alert alert-primary" role="alert"> |
||||
No Todos to display |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
export default TodoList; |
||||
|
Loading…
Reference in new issue