Creating a simple todolist using React Js.Dont know why my state is not getting updated with new todo Item

Question

I basically making a todolist app.I just want the user entered text and add it to my state.But when i click the button the state is not getting updated with the new todoItem.please help with this.

My state is in Context.js

import React from 'react';
const Context=React.createContext();

const reducer=(state,action)=>{
    switch(action.type){
        case "ADD_TODO":
            return {
                   
                ...state,
                todos:[action.payload,...state.todos]
            
            }
        default:
            return state;

    }
}


export class Provider extends React.Component{
    state={
        todos:[
            {id:"1",todoItem:"Code daily"},
            {id:"2",todoItem:"play"},
            {id: '16a1c935-a033-4272-85b4-4412de42b59f', todoItem: 'wdwdwd'},
           
        ],
        dispatch:action=>{
            this.setState(state=>{
                reducer(state,action)
            })
        }
    }



    render(){
        return(
            <Context.Provider value={this.state}>
                {this.props.children}
            </Context.Provider>
        )
    }
}


export const Consumer=Context.Consumer;

My Input Component for taking the todoitem input from user and add it to the state.But my page is reloading but my user entered text is not added to the state.And there is no error showing.

InputTodo.js

import React, { Component } from 'react';
import '../css/InputTodo.css';
import { v4 as uuidv4 } from 'uuid';
import {Consumer} from '../context';


class InputTodo extends Component {
    constructor(props){
        super(props);
        this.state={
            inputValue:""
        };
    }

    

    OnChange(event){
      const txtEntered=event.target.value;
      
       this.setState({
           inputValue:txtEntered,
       });
    }



    handleButtonClicked=(dispatch,event)=> {
        event.preventDefault();
        const inputValue=this.state.inputValue;

        const newTodo={
            id:uuidv4(),
            todoItem:inputValue, 
        }

        dispatch({type:'ADD_TODO',payload:newTodo});
 
      this.setState({
          inputValue:"",
      });


      this.props.history.push('/'); 
    }

    render() {
        return(
            <Consumer>
                {value=>{
                  const {dispatch}=value;
                    return (
                    <form onSubmit={this.handleButtonClicked.bind(this,dispatch)}>
                    <div className="form-group">
                        <input  value={this.state.inputValue} onChange={this.OnChange.bind(this)}  className="form-control" placeholder="Enter the todo" />
                        <button type="submit"  className="btn btn-primary">Add</button>
                    </div>
            </form>
           
                    )}}
            </Consumer>
        )
    }
}


export default InputTodo;

Answer 1

You just forgot to return the new state in dispatch setState:

export class Provider extends React.Component{
    state={
        /* ... */
        dispatch:action=>{
            this.setState(state=>{
                return reducer(state,action) /* <--- Here you missed the return */
            })
        }
    }
   /* ... */