Odtnhj

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!

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.

<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

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.

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?