Stateless React components with controlled input

Question

Currently to make controlled inputs work inside Stateless React components I am wrapping the stateless component inside a Sate full component.

For example,

const InputComponent = (props) => {
  return (
    <input value={props.name} onChange={props.handleChange} />
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Tekeste'
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      name: event.target.value
    });
  }
  render() {
    return (
      <InputComponent name={this.state.name} handleChange={this.handleChange} />
    );
  }
}

What I would like to know is a couple of things.

Is this a good pattern?
If not how can I achieve my goal i.e to have controlled inputs inside stateless components.

As far as I know, this is the ideal way to use controlled inputs — connected_user
– connected_user, Commented Jun 27, 2019 at 14:37

frontsideair · Accepted Answer · 2017-06-12 18:16:33Z

8

Since the InputComponent receives its value and the callback to modify it from its parent, it's a controlled input without a state. It's a perfectly good pattern, you can also make it even simpler using ES7 class properties like this:

class App extends React.Component {
  state = {
    name: 'Tekeste'
  };

  handleChange = (event) => {
    this.setState({
      name: event.target.value
    });
  }

  render() {
    return (
      <InputComponent name={this.state.name} handleChange={this.handleChange} />
    );
  }
}

If you're using create-react-app, it's already supported out-of-the-box.

Also, you can rename the props of controlled input to value and onChange as they are more conventionally used.

answered Jun 12, 2017 at 18:16

frontsideair

5283 silver badges7 bronze badges

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

Comments

NullVoxPopuli · Accepted Answer · 2017-06-13 01:44:55Z

0

building off of @frontsideair's answer, you could do something like the following using https://github.com/NullVoxPopuli/react-state-helpers

import React, { Component } from 'react';
import stateWrapper from 'react-state-helpers';

class App extends Component {
  render() {
    const { 
      mut, 
      values: { name } 
    } = this.props;

    return <InputComponent name={name} handleChange={mut('name')} />;
  }
}

export default stateWrapper(App)

answered Jun 13, 2017 at 1:44

NullVoxPopuli

65.6k76 gold badges216 silver badges364 bronze badges

Collectives™ on Stack Overflow

Stateless React components with controlled input

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related