How to create a dynamic input type component

Question

I'm developing a dynamic component where the input can be used for several types: text, password, number, date, etc. The idea is to use this input, no matter the type and where to implement it, as long its adaptable. I thought using state was a nice idea, but I have no clue how to do this. Any thoughts?

import React, { Component } from 'react';
import './styles.css';

export default class InputField extends Component {
constructor(props) {
    super(props);

    this.state = {
        name: '',
        password: false,
        type: ''
    }
}

render () {
    return (
        <div>
            <label className='f-size'>{this.state.name}</label>
            <input 
                className='input'
                name={this.state.name}
                placeholder={this.state.name}
                value={this.props.value}
                type={this.state.type}
                onChange={this.props.onChange}
            />
            <span className="errorMessage">{this.props.error}</span>
            <span className="errorMessage">{this.props.missField}</span>

        </div>

    )
}
}

Thank you!

How do you want to configure the type? You could use this.props.type instead and let the user of InputField configure it. — Tholle
– Tholle, Commented Nov 13, 2018 at 12:46
Is there any reason why you want the state in the input. Surely, you'd want the value of the input set on it's parent? — Charlie
– Charlie, Commented Nov 13, 2018 at 12:49

Charlie · Accepted Answer · 2018-11-13 13:05:53Z

I personally think you should control this via props, seeing as the value will only be meaningful to the Input's parent.

I used this

const InputField = ({
  name,
  placeholder,
  value,
  type,
  onChange,
  error,
  missField
}) => (
  <div>
    <label className="f-size">{name}</label>
    <input
      className="input"
      name={name}
      placeholder={placeholder}
      value={value}
      type={type}
      onChange={onChange}
    />
    <span className="errorMessage">{error}</span>
    <span className="errorMessage">{missField}</span>
  </div>
);

Parent component:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }
  state = {
    value: '',
    password: '',
  };

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
  render() {
    return (
      <div className="App">
        <InputField
          value={this.state.value}
          type="number"
          name="value"
          onChange={this.handleChange}
        />
        <InputField
          value={this.state.password}
          type="password"
          name="password"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

Code Sandbox: https://codesandbox.io/s/y4ljv75k9

Edited to used a stateless component. Not sure if you want state to handle error messages but from your example, this is a valid solution.

Chris Parsonage · Accepted Answer · 2018-11-13 12:51:29Z

1

<InputField type="text" />
<InputField   type="password" />

<input 
  className='input'
  name={this.state.name}
  placeholder={this.state.name}
  value={this.props.value}
  type={this.props.type}
  onChange={this.props.onChange}
  />

I would use props to change the type and manage the component. You could then control the component from a form definition

answered Nov 13, 2018 at 12:51

Chris Parsonage

936 bronze badges

Comments

Gurdeep Singh · Accepted Answer · 2018-11-13 12:51:02Z

0

You should use props not state, so you can pass

<InputType type="text" />
<InputType type="password" />
<InputType type="number" />

and for the other params you can use props also.

answered Nov 13, 2018 at 12:51

Gurdeep Singh

5894 silver badges4 bronze badges

Comments

Lokman Boukhoulda · Accepted Answer · 2018-11-13 13:24:14Z

0

You could use this.props.type but the standard jsx input component is already dynamic as you can see from my example below :

var root = document.getElementById('root');
class InputField extends React.Component {
	render() {
		return (
		<div>
			<input type={this.props.type} />
		</div>
		)
	}	
}

class App extends React.Component {
	render() {
		return (
		<div>
			<input type='date' />
			<InputField type='password'/>
		</div>
		)
	}	
}

ReactDOM.render(<App />, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

Is there a reason why you would like to use a custom input component?

answered Nov 13, 2018 at 13:24

Lokman Boukhoulda

813 silver badges11 bronze badges

1 Comment

RCohen Over a year ago

The idea was to build a small react components library, so I can build forms without changing the props in the parent component.

Collectives™ on Stack Overflow

How to create a dynamic input type component

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related