1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- import React, { Component, Fragment } from "react";
- import "./Todos.css";
- import PropTypes from "prop-types";
- import { connect } from "react-redux";
- import { addTodo, removeTodo } from "./store";
- class TodoList extends Component {
- state = {
- input: "",
- };
- handleclick = i => () =>
- this.props.removeTodo(i);
- handleChange = e =>
- this.setState({ input: e.currentTarget.value });
- handleSubmit = (e) => {
- e.preventDefault();
- this.props.addTodo({ text: this.state.input });
- this.setState({ input: "" });
- };
- render() {
- return (
- <form className="todos--container" data-testid="addTodoForm" onSubmit={this.handleSubmit}>
- <h1 className="todos--h1">Todos</h1>
- <input type="text" name="todo" data-testid="todo"
- onChange={this.handleChange}
- value={this.state.input} />
- <ul>
- {this.props.todos.map(({ text }, i) => (
- <li onClick={this.handleclick(i)} key={i}>
- {text}
- </li>
- ))}
- </ul>
- <button className="todo--button" type="submit" data-testid="submitButton">Add todo</button>
- </form>
- );
- }
- }
- TodoList.propTypes = {
- addTodo: PropTypes.func,
- removeTodo: PropTypes.func,
- todos: PropTypes.array,
- };
- const mapStateToProps = ({ currentList: { todos } }) => ({ todos });
- const bindActionsToDispatch = dispatch => ({
- addTodo: todo => dispatch(addTodo(todo)),
- removeTodo: id => dispatch(removeTodo(id)),
- });
- const TodoListContainer = connect(
- mapStateToProps,
- bindActionsToDispatch
- )(TodoList);
- export {
- TodoListContainer,
- TodoList
- };
|