CODEWITHSUNDEEP
reactjsreact-hooks
Jir
Jir

Reputation: 3125

Custom react hook to set input form not working

I've tried creating a custom hook, following the examples an article about handling forms in react using hooks. I should also add I'm very new to react.

This is the content of hooks/useInput.js:

import { useState } from "react";

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(event) {
    console.log(event.target.name);
    console.log(event.target.value);
    setValue(event.target.value);
  }

  return [value, handleChange];
}

export default useInput;

In a component I have the following:

import useInput from "hooks/useInput";

export default function Address(props) {
  const [fullName, setFullName] = useInput("");

  return (
    <FormControl fullWidth>
      <CustomInput
        required
        labelText="Full name"
        id="fullName"
        formControlProps={{
          fullWidth: true
        }}
        value={fullName}
        onChange={setFullName}
      />
    </FormControl>
  );
}

When I try to input some text (or even if I try to change the default state), nothing happens. Any breakpoint that I set in useInput.js are not hit and no logging appears in the console.

Where am I going wrong?

Upvotes: 1

Views: 855

Answers (1)

Shahnawaz Hossan
Shahnawaz Hossan

Reputation: 2720

If you want to see your current input value with a button click you can see like this. I didn't even change your userInput.js file. I can see the updated value by doing this and console as well.

export default function Address(props) {
    const [fullName, setFullName] = useInput("");
    return (
        <>
            <input
                placeholder="Name"
                value={fullName}
                onChange={setFullName}
            />
            <button onClick={() => {
                console.log(fullName);
            }}>Submit</button>
        </>
    );
}

Since I don't know about your CustomInput, I have written this with default input and button. Please check your CustomInput correctly. Because default input is working.

Upvotes: 2

Related Questions