TypeError: Cannot read property 'setValues' of undefined | React

Question

when i use setValues() function on handleInputChange i get this error:

code:

import React, { useState, useEffect } from "react";

const useForm = (initialFieldValues) => {
  const { values, setValues } = useState(initialFieldValues);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    const fieldValue = { [name]: value };

    this.setValues({
      ...values,
      ...fieldValue,
    });
  };

  return {
    values,
    setValues,
    handleInputChange,
  };
};

export default useForm;

how can i solve this error? any response will be appreciated

Answer 1

In class component you would use this.setValues , but in functional components you can directly use setValues without this keyword.

Change:

this.setValues({
      ...values,
      ...fieldValue,
    });

To:

setValues({
      ...values,
      ...fieldValue,
    });

Also useState returns an array, so you would use it like this:

const [ values, setValues ] = useState(initialFieldValues);

Please go through the documentation: https://reactjs.org/docs/hooks-state.html

Answer 2

import React, { useState, useEffect } from "react";

const useForm = (initialFieldValues) => {
  const [ values, setValues ] = useState(initialFieldValues);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    const fieldValue = { [name]: value };

    setValues({
      ...values,
      ...fieldValue,
    });
  };

  return {
    values,
    setValues,
    handleInputChange,
  };
};

export default useForm;