React: Form

App.js

import React, { Component } from 'react'
import './App.css';
import PostForm from './forms/PostForm';
class App extends Component{

	render(){
		return (
			<div className="container">
				<div className="col-md-10">
					<PostForm />
				</div>
			</div>
		)
	}
}

export default App;

// Lifecycle
// constructor
// render
	// call all lifecycle methods
// componentDidMount
// componentDidUpdate
// componentWillUnmount

PostForm.js

import React from 'react'

const initialSate = {
		name: '',
		email: '',
		password: '',
		bio: '',
		country: '',
		gender: '',
		skills: []
	}

class PostForm extends React.Component{
	constructor(){
		super()

		this.myForm = React.createRef()
	}

	state = initialSate

	changeHandler = (event) => {
		if(event.target.type === 'checkbox'){
			if(event.target.checked){
				this.setState({
					...this.state,
					skills: this.state.skills.concat(event.target.value)
				})
			} else {
				this.setState({
					...this.state,
					skills: this.state.skills.filter(skill => skill !== event.target.value)
				})
			}
		} else {
			this.setState({
				[event.target.name]: event.target.value
			})
		}
	}

	submitHandler = (event) => {
		event.preventDefault()
		console.log(this.state);

		this.myForm.current.reset();
		this.setState({
			...initialSate
		})
	}

	render(){
		return(
			<form ref={ this.myForm } onSubmit={ this.submitHandler }>
				<div className="form-group">
					<label htmlFor="name">Enter your full name</label>
					<input
						onChange={ this.changeHandler }
						className="form-control"
						type="text"
						placeholder="Enter your name"
						name="name"
						id="name"
						value={ this.state.name }
					/>
				</div>
				<div className="form-group">
					<label htmlFor="name">Enter your email</label>
					<input 
						onChange={ this.changeHandler }
						className="form-control"
						type="email"
						placeholder="Enter your email"
						name="email"
						id="email"
						value={ this.state.email }
					/>
				</div>
				<div className="form-group">
					<label htmlFor="password">Enter your password</label>
					<input 
						onChange={ this.changeHandler }
						className="form-control"
						type="password"
						name="password"
						id="password"
						value={ this.state.password }
					/>
				</div>

				<div className="form-group">
					<label htmlFor="bio">Enter your short bio</label>
					<textarea 
						onChange={ this.changeHandler }
						className="form-control"
						type="text"
						name="bio"
						id="bio"
						value={ this.state.bio }
					/>
				</div>

				<div className="form-group">
					<label htmlFor="password">Enter your country</label>
					<select
						className="form-control" 
						onChange={ this.changeHandler }
						name="country"
						id="country"
					>
						<option>-----------</option>
						<option value="bangladesh">Bangladesh</option>
						<option value="india">India</option>
						<option value="usa">Usa</option>
						<option value="canada">Canada</option>
					</select>
				</div>

				<div className="form-group">
					<label htmlFor="password">Enter your gender</label>
					<div className="form-check">
						<input onChange={this.changeHandler} type="radio" name="gender" value="male"/>Male
					</div>
					<div className="form-check">
						<input onChange={this.changeHandler} type="radio" name="gender" value="female"/>Female
					</div>
					<div className="form-check">
						<input onChange={this.changeHandler} type="radio" name="gender" value="other"/>Other
					</div>
				</div>

				<div className="form-group">
					<label htmlFor="password">Enter language</label>
					<div className="form-check">
						<input onChange={this.changeHandler} type="checkbox" name="skills" value="js"/>JS
					</div>
					<div className="form-check">
						<input onChange={this.changeHandler} type="checkbox" name="skills" value="php"/>PHP
					</div>
					<div className="form-check">
						<input onChange={this.changeHandler} type="checkbox" name="skills" value="java"/>Java
					</div>
				</div>

				<button className="btn btn-primary" type="submit">submit</button>
			</form>
		)
	}
}

export default PostForm

// name
// email
// password
// bio
// country select
// Radio box
// checkbox