# React Forms

## React Forms Part 1

Working with `text` input.

```jsx
import React, {Component} from "react"

class App extends Component{
    constructor(){
        super()
        // Initialing State
        this.state = {
            firstName: "",
            lastName: "",
        }
        
        this.handleChange = this.handleChange.bind(this)
    }
    
    // Custom Class Method
    handleChange(event){
        // Copying the Value Initially using Destructuring
        const {name, value} = event.target
        // Setting State
        this.setState({
            [name]: value
        })
    }
    
    render(){
        return(
            <form>
                <input 
                    type="text" 
                    value={this.state.firstName}  // value attribute is set initially to achieve controlled form 
                    name="firstName" 
                    placeholder="firstName" 
                    onChange={this.handleChange} 
                />
                <input 
                    type="text" 
                    value={this.state.lastName} 
                    name="lastName" 
                    placeholder="lastName"  // value attribute is set initially to achieve controlled form 
                    onChange={this.handleChange} 
                />
                <h1>{this.state.firstName} {this.state.lastName}</h1>
            </form>
        )
    }
}

export default App
```

## React Forms Part 2

Working with `select,` `checkbox,` & `radio` input.

```jsx
import React, {Component} from "react"

class App extends Component{
    constructor(){
        super()
        this.state = {
            firstName : "",
            lastName : "",
            textArea : "",
            isFriendly: false,
            gender: "",
            favFruit: "banana"
        }
        this.handleChange = this.handleChange.bind(this)
    }
    
    handleChange(event){
        const {name, value, type, checked} = event.target
        
        // Overriding initial event directly
        if (type === "checkbox"){
            this.setState({
                [name]:checked
            })
        }else{
            this.setState({
                [name]:value
            })
        }
    }
    
    render(){
        return(
            <div>
                <form>
                    <input
                        type="text"
                        name="firstName"
                        value={this.state.firstName}
                        placeholder="First Name...."
                        onChange={this.handleChange}
                    />
                    
                    <input
                        type="text"
                        name="lastName"
                        value={this.state.lastName}
                        placeholder="Last Name...."
                        onChange={this.handleChange}
                    />
                    
                    <textarea
                        name="textArea"
                        value={this.state.textArea}
                        onChange={this.handleChange}
                    />
                    
                    <br/>
                    
                    <label> 
                        <input 
                        type="checkbox"
                        name="isFriendly"
                        checked={this.state.isFriendly}
                        onChange={this.handleChange}
                        /> Is Friendly?
                    </label>
                    
                    <br />
                    
                    <label> 
                        <input 
                        type="radio"
                        name="gender"
                        value="male"
                        checked={this.state.gender === "male"}
                        onChange={this.handleChange}
                        /> Male
                    </label>
                    
                    <label> 
                        <input 
                        type="radio"
                        name="gender"
                        value="female"
                        checked={this.state.gender === "female"}
                        onChange={this.handleChange}
                        /> Female
                    </label>
                    
                    <br/>
                    <label>Favorite fruit?</label>
                    
                    <select
                        name="favFruit"
                        value={this.state.favFruit}
                        onChange={this.handleChange}
                    >
                        <option value="mango">Mango</option>
                        <option value="banana">Banana</option>
                        <option value="lichi">Lichi</option>
                    </select>
                    
                    
                </form>
                
                <h1>{this.state.firstName} {this.state.lastName}</h1>
                <p>{this.state.textArea}</p>
                <p>{this.state.isFriendly ? "True" : "False"}</p>
                <p>{this.state.gender}</p>
                <p>{this.state.favFruit}</p>
            </div>
        )
    }
}

export default App
```

{% hint style="info" %}
For `checkbox` input we have to copy `type` & `checked` property and **handle the input in a different way** than other input types.
{% endhint %}
