TypeError: dispatch is not a function when using react-context api

Question

I am very new to react and currently using Context API, I am trying to get the country name from user input in the form then send back to the context, and in context I am using Componentdidmount to call API and show data, when user input, its saves data alert it but then suddenly shows up with that error.

This is my form file..

import React, { useState } from 'react'
import { Consumer } from '../../context';
import Spinner from '../spinner';

function Country() {
    const [name, setName] = useState('');

    // 
    function Submit (e, dispatch){
        e.preventDefault();
        alert(`this form is submited ${name}`)

        dispatch({type: 'SELECT_COUNTRY', payload: name});

        setName('');
    }

    return (
        <Consumer>
            { value =>{
                if (!value.chart.length){
                    return <Spinner/>
                }
                else{
                    // setCountry(value.countries)
                    const { dispatch } = value;
                    console.log('coming from dispatch',dispatch)
                    return (
                        <div className='columns'>
                            <div className='column'>
                                <form onSubmit={Submit.bind(dispatch)}>
                                    <div className="field">
                                        <label className="label">Pick your Country</label>
                                        <div className="control has-icons-left has-icons-right">
                                            <input className="input" type="text" placeholder="Enter Country name..." value={name} onChange={e => setName(e.target.value)}/>
                                            <span className="icon is-small is-left">
                                                <i className="fas fa-globe-asia"></i>
                                            </span>
                                            <span className="icon is-small is-right">
                                                <i className="fas fa-check"></i>
                                            </span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    );**strong text**
                }
            }}
        </Consumer>
    )
}


export default Country;

This is my Context file..

import React, { Component } from 'react';
import axios from "axios";
import Country from './components/country/country';

const Context = React.createContext();

const reducer = (state, action) => {
    switch(action.type) {
        case 'SELECT_COUNTRY':
            return {
                ...state,
                cont:action.payload
            };
        default:
            return state;
    }
}

export class Provider extends Component {

    state = {
        data : {},
        chart : {},
        countries : {},
        cont: '',
        dispatch : action => this.setState(state =>
            reducer(state,action))
    }
    componentDidMount(){
        axios.get('https://covid19.mathdro.id/api')
            .then(res => {
                // console.log(res.data)
                this.setState({ data : res.data});
            })
            .catch(err => console.log(err))

        axios.get('https://covid19.mathdro.id/api/daily')
        .then(res => {
            const result = res.data.map(({ confirmed, deaths, reportDate: date }) => ({ confirmed: confirmed.total, deaths: deaths.total, date }));
            this.setState({ chart : result});
        })
        .catch(err => console.log(err))

        axios.get('https://covid19.mathdro.id/api/countries')
        .then(res => {
            console.log('yeh country ka res h', res.data.countries)
            const { countries } = res.data;
            // console.log('yesh country ka destructuring h',countries)

            this.setState({ countries : countries.map( country => country.name)});
        })
        .catch(err => console.log(err))

    }

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

export const Consumer = Context.Consumer;

Answer 1

You were not calling your Submit function correctly, try this:

form onSubmit={(e)=>Submit(e,dispatch)}