react creating generic input component

Question

I want to make a generic input component using hooks but not 100% sure how to implement this.

So I have a parent component

const Parent = () => {
   const [team, setTeam] = useState('');
   return <Input onChange={???} value={team} />
}

and then my Input component looks like this.

const Input = ({onChange}) => {
   return <input onChange={onChange} />
}

I am wondering where the state should be stored. Is it in the Parent component, or in the Input or do both need to store state?

Why do you insist on using hooks? A class component would make it much easier — Dor Shinar
– Dor Shinar, Commented Feb 14, 2019 at 18:00
Why do you insist on using a class component ? A hook would make it much easier @DorShinar — Treycos
– Treycos, Commented Feb 14, 2019 at 18:50
Because you can't bind functions in a functional component. The performance benefit from not binding might be negligible in some cases, but in other it could slow the application. — Dor Shinar
– Dor Shinar, Commented Feb 14, 2019 at 18:54
@DorShinar because I'm riding on the HOOKS hype train 😎, don't get left behind brother 😁 — peter flanagan
– peter flanagan, Commented Feb 14, 2019 at 23:13

Treycos · Accepted Answer · 2019-02-28 14:41:23Z

4

Simply use an arrow function bound to your onChange event. Then use the setTeam callback given in your hook inside of it :

const Parent = () => {
    const [team, setTeam] = useState('');
    return <Input onChange={ev => setTeam(ev.target.value)} value={team} />
}

Also, avoid having redundant state values. Any information should only be stored in the component it is used in.

The shortened Input code :

const Input = ({ onChange, value }) => <input onChange={onChange} value={value} />

Or :

const Input = props => <input {...props} />

edited Feb 28, 2019 at 14:41

answered Feb 14, 2019 at 17:48

Treycos

7,4913 gold badges29 silver badges53 bronze badges

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

6 Comments

Dor Shinar Over a year ago

If the parent component will be rendered often, creating the callbacks over and over again could impact performance

peter flanagan Over a year ago

and is input just const Input = () => (<input />);

peter flanagan Over a year ago

I am seeing the following error: Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

Treycos Over a year ago

It seems that the function you passed is undefined

Adam Over a year ago

It's generally not a good idea to use arrow functions in onChange to bind callbacks. A better way is to bind in the constructor or directly on the class field.

|

Collectives™ on Stack Overflow

react creating generic input component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related