import React,{Component} from 'react'; import * as uuid from 'uuid'; import { render } from '@testing-library/react'; class TodoList extends React.Component{ state={ text:'' } onChange=(e)=>{ this.setState({ text:e.target.value, }) } onClick=()=>{ const id =uuid.v4(); this.props.addTodo(id,this.state.text) } onDelete=(id)=>{ this.props.deteleTodo(id) } render(){ return( <div> <ul> {this.props.todos.map((todo)=>( <li key={todo.id}>{todo.text} <button onClick={this.onDelete(todo.id)}>delete</button> </li> ) )} </ul> <input value ={this.state.text} onChange= {this.onChange}/> <button onClick={this.onClick}> Add toto</button> </div> ) } } export default TodoList -------------------------------------------------------------- my reducer export default (state =[],action)=>{ switch (action.type){ case 'ADD_TODO': return[...state, action.payload]; case 'REMOVE_TODO': const newState=state.filter((todo)=>todo.id !== action.payload.id); return newState; default: return state; } } import {combineReducers} from 'redux' import todosReducer from './todos' export default combineReducers({ todos:todosReducer, }) -------my action export const addTodo =(id,text)=>({ type:'ADD_TODO', payload:{id,text}, }); export const deteleTodo=(id)=>({ type: 'REMOVE_TODO', payload:id }) -----my containers import {connect} from 'react-redux' import TodoList from '../components/todo-list' import {addTodo,deteleTodo} from '../actions/add-todo' const mapStateToProps=(state)=>({ todos:state.todos, }) const mapDispatchToProps=(dispatch)=> { return{ addTodo:(id,text)=>dispatch(addTodo(id,text)), deteleTodo:(id)=>dispatch(deteleTodo(id)) } } export default connect (mapStateToProps,mapDispatchToProps)(TodoList) 2 Comments
<button onClick={() => this.onDelete(todo.id)}>delete</button>
const newState=state.filter((todo)=>todo.id !== action.payload.id);
todo
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)