When to use classes and functional components in React!

const FormInput = ({ handleChange, label, ...otherProps }) => (
<div className='group'>
<input className='form-input' onChange={handleChange} {...otherProps} />
{label ? (
<label
className={`${
otherProps.value.length ? 'shrink' : ''
} form-input-label`}
>
{label}
</label>
) : null}
</div>
);
class SignIn extends React.Component {
constructor(props) {
super(props)
this.state = {
email: '',
password: ''
}
}
handleSubmit = event => {
event.preventDefault()
this.setState({ email: '', password: '' })
}
handleChange = event => {
const { value, name } = event.target
this.setState({ [name]: value })
}
render() {
return (
<div className='sign-in'>
<h2>I already have an account</h2>
<span>Sign in with your email and password</span>
<form onSubmit={this.handleSubmit}>
<FormInput
name='email'
type='email'
handleChange={this.handleChange}
value={this.state.email}
label='email'
required
/>
<FormInput
name='password'
type='password'
value={this.state.password}
handleChange={this.handleChange}
label='password'
required
/>
<submit type='submit'> Sign in </submit>
</form>
</div>
);
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Avitosh Totaram

Avitosh Totaram

Problem solver with experience in Software, and Mechanical engineering. Interested in web-dev, machine learning, artificial intelligence, and new technologies.