42 lines
884 B
JavaScript
42 lines
884 B
JavaScript
import React from "react";
|
|
import { connect } from "react-redux";
|
|
|
|
function TaskList(props) {
|
|
const handleAddTask = () => {
|
|
const text = prompt("Enter a new task:");
|
|
if (text) {
|
|
props.dispatch({ type: "ADD_TASK", text, id });
|
|
}
|
|
};
|
|
|
|
const handleToggleTask = (id) => {
|
|
props.dispatch({ type: "TOGGLE_TASK", id });
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<ul>
|
|
{props.tasks.map((task) => (
|
|
<li key={task.id}>
|
|
<input
|
|
type="checkbox"
|
|
checked={task.completed}
|
|
onChange={() => handleToggleTask(task.id)}
|
|
/>
|
|
{task.text}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<button onClick={handleAddTask}>Add Task</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
tasks: state.tasksReducer.tasks,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(TaskList);
|