Passing React Hook to functional component

Question

I'm looking to create a functional component that takes in a hook and its Set function as parameters and constructs an associated input using those fields (along with some other fields). Running into issues with passing in spread operators (as advised in "Learning React, 2nd edition"). Relevant snippets below, help appreciated!

Generic function that takes in an initial value and returns a new hook and its setValue function:

    export const useInput = (initialValue) => {
      const [value, setValue] = useState(initialValue);
      return [
        { value, onChange: (e) => setValue(e.target.value) },
        () => setValue(initialValue),
      ];
    };

The hook to be used:

    const [firstName, setFirstName] = useInput("");

The functional component (after some cleanup)

      const MyInputComp = (props) => {
        return (
          <div>
            <input
              className="blah-blah-blah"
              {props.obj}   // *ERROR*
              type="text"
              placeholder={props.placeholder}
              required={props.required}
            />
          </div>
        );
      };

Here's how the component is invoked:

    <MyInputComp
        text="First Name"
        obj={...firstName}  // *ERROR*
        placeholder="Jon"
        required={true}
    />

Drew Reese · Accepted Answer · 2021-01-26 19:12:07Z

1

Issue

You are not consuming the input value and updater correctly.

The are returned as { value, onChange: (e) => setValue(e.target.value) }

but you are passing singly as obj

obj={...firstName}

and

const MyInputComp = (props) => {
  return (
    <div>
      <input
        className="blah-blah-blah"
        {props.obj}   // *ERROR*
        type="text"
        placeholder={props.placeholder}
        required={props.required}
      />
    </div>
  );
};

Solution

Spread the value and onChange props into the underlying input

const MyInputComp = (props) => {
  return (
    <div>
      <input
        className="blah-blah-blah"
        {...props.obj} // <-- spreads value & onChange props
        type="text"
        placeholder={props.placeholder}
        required={props.required}
      />
    </div>
  );
};

Since MyInputComp appears to be simply proxying some props you can spread them all in and then destructure what you need.

const MyInputComp = (props) => {
  return (
    <div>
      <input
        className="blah-blah-blah"
        {...props} // <-- spread all passed props
        type="text"
      />
    </div>
  );
};

Use

const [firstName, setFirstName] = useInput("");

<MyInputComp
    text="First Name"
    {...firstName} // <-- spread to input
    placeholder="Jon" // <-- spread to input
    required={true} // <-- spread to input
/>

edited Jan 26, 2021 at 19:12

answered Jan 26, 2021 at 7:32

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

S D Over a year ago

Excellent! Thanks not just for the solution, but for the guidance on how to improve it further.

Mudassar hassan · Accepted Answer · 2021-01-26 08:01:00Z

You will need to do couple of changes. First spread the props.obj object so that input element under the hood can take value and onChange props. Such as

const MyInputComp = (props) => {
  return (
    <div>
      <input
        className="blah-blah-blah"
        {...props.obj}
        type="text"
        placeholder={props.placeholder}
        required={props.required}
      />
    </div>
  );
};

Then render the MyInputComp like that

 <MyInputComp
      text="First Name"
      obj={firstName}
      placeholder="Jon"
      required={true}
      onChange={handleNameChange}
/>

Also in the custom useInput hook the change function should be like

(value) => setValue(value)

instead of () => setValue(initialValue)

Collectives™ on Stack Overflow

Passing React Hook to functional component

2 Answers 2

Issue

Solution

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Issue

Solution

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related