1

i have also reffered the documentation of react_hooks but it was of no help so plz help me with this code

actions/forgetpassword.js

import axios from "axios";
import {setAlert} from "./alert";

//find email in database

export const forgetpassword = ({email}) => async dispatch => {

    const body = JSON.stringify({email});
    try {
        const res = await axios.post('/api/otp/forgetpassword', body);
        dispatch({
            type: EMAIL_FOUND,
            payload: res.data
        });
    } catch (err) {
        const errors = err.response.data.errors;

        if (errors) {
            errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
        }
        dispatch({
            type: EMAIL_ERROR
        });
    }
};

there is an error in making funtion it says function is not the hook function not the custom hook function

forgetpassword.js

it says error is in this file

import React, {Fragment, useState} from 'react';
import {Link, Redirect} from "react-router-dom";
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {forgetpassword} from '../../actions/forgetpassword';

const forgetPassword = ({forgetpassword}) => {

    const [formData, setformData] = useState({
        email:''
    });
    const {email} = formData;

    const onChange = e => setformData({...formData, [e.target.name]: e.target.value});

    const onSubmit = async e => {
        e.preventDefault();
        console.log('SUCCESS');
        forgetpassword(email);
    };

    return (
        <Fragment>
            <h1 className="large text-primary">Sign In</h1>
            <p className="lead"><i className="fas fa-user"></i> Sign Into Your account</p>
            <form className="form" onSubmit={e => onSubmit(e)}>
                <div className="form-group">
                    <input type="email" placeholder="Email Address" name="email" value={email}
                          onChange={e => onChange(e)}/>
                </div>
                <input type="submit" className="btn btn-primary" value="Login"/>
            </form>
        </Fragment>
    );
};
forgetPassword.prototype = {
    forgetpassword: PropTypes.func.isRequired,
};

export default connect(null, {forgetpassword})(forgetPassword);

error

Line 8:  React Hook "useState" is called in function "forgetPassword" which is neither a React function component or a custom React Hook function```

I have attached all the code related to error so if any body knows the problem tell me
kirtan patel
  • 13
  • 1
  • 7

1 Answers1

8

The issue seems to be that the component name is not starting with a capital letter.

React recognizes it as a function rather than a component and it throws that error.

Alvaro
  • 9,247
  • 8
  • 49
  • 76