REACT - FORMS

    //FORMS
    //We check inputs as the states changes, with every key stroke
    import React from 'react'

    class App extends React.Component { 
    constructor(){
        super()
        this.state ={
            firstName: "",
            lastName: ""
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(event){
        // const {name, value} = event.target
        this.setState({
        [event.target.name]: event.target.value
        // [name]: value //si se activa arriba:   const {name, value} = event.target
        })
    }


    //Importance of "name, it matches the this.state in constructor"
    render(){
        return (
            <form>
            <input type="text" value={this.state.firstName} name="firstName" placeholder="First Name" onChange={this.handleChange}></input>
            <input type="text" value={this.state.lastName} name="lastName" placeholder="Last Name" onChange={this.handleChange}></input>
            <h1>{this.state.firstName} {this.state.lastName}</h1>
            </form>
        )
    }
    }

    export default App;

    

    //FORMS 2
    //We check inputs as the states changes, with every key stroke
    import React from 'react'

    class App extends React.Component { 
    constructor(){
        super()
        this.state ={
            firstName: "",
            lastName: "",
            isFriendly: true,
            gender: "",
            favColor: "blue"
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(event){
        const {name, value, type, checked} = event.target
        type == "checkbox" ? this.setState({[name]:checked}) : this.setState({[name]: value})
    }


    //Importance of "name, it matches the this.state in constructor"
    render(){
        return (
            <form onSumbit="">
            <input type="text" value={this.state.firstName} name="firstName" placeholder="First Name" onChange={this.handleChange}></input>
            <input type="text" value={this.state.lastName} name="lastName" placeholder="Last Name" onChange={this.handleChange}></input>
            
            <br/>
        
            <textarea value={"Default value"} onChange={this.handleChange}/>
            <br/>
            <label>
            <input type="checkbox" name="isFriendly" checked={this.state.isFriendly} onChange={this.handleChange}/> isFriendly?
            </label>
            <br/>
            <label>
            <input type="radio" name="gender" value="male" checked={this.state.gender === "male"} onChange={this.handleChange}/> Male
            </label>
            <br/>
            <label>
            <input type="radio" name="gender" value="female" checked={this.state.gender === "female"} onChange={this.handleChange}/> Female
            </label>
            <br/>
            <label></label>
            <select value={this.state.favColor} onChange={this.handleChange} name="favColor">
                <option value="blue">blue</option>
                <option value="red">red</option>
                <option value="yellow">yellow</option>
                <option value="white">white</option>

            </select>

            <h1>{this.state.firstName} {this.state.lastName}</h1>
            <h1>{this.state.isFriendly}</h1>
            <h1>{this.state.gender}</h1>
            <h1>Favorite color {this.state.favColor}</h1>
            <button onClick="">Submit</button>
            {/* <input type="submit">Submit</input> */}
        
            </form>
        )
    }
    }

    export default App;

    

    // FORMS PRACTICE

    //FORMS
    //We check inputs as the states changes, with every key stroke
    import React from 'react'

    class App extends React.Component { 
    constructor(){
        super()
        this.state ={
            firstName: "",
            lastName: "",
            age: "",
            gender: "",
            destination: "",
            isVegan: false,
            isKosher: false,
            isLactoseFree: false
        
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(event){
        const {name, value, type, checked} = event.target
        type === "checkbox" ? 
        this.setState({
            [name]:checked     
        })       
        : 
        this.setState({[name]: value})
    }


    //Importance of "name, it matches the this.state in constructor"
    render(){
        return (
        <main>
            <form onSumbit="">
            <input type="text" value={this.state.firstName} name="firstName" placeholder="First Name" onChange={this.handleChange}></input><br/>
            <input type="text" value={this.state.lastName} name="lastName" placeholder="Last Name" onChange={this.handleChange}></input><br/>
            <input type="text" value={this.state.age} name="age" placeholder="Age" onChange={this.handleChange}></input><br/>

            <label>
                Gender:
                <input type="radio" name="gender" value="male" checked={this.state.gender === "male"} onChange={this.handleChange}/> Male
                <input type="radio" name="gender" value="female" checked={this.state.gender === "female"} onChange={this.handleChange}/> Female
            </label>
            <br/>

            <label>Destination:</label>  
            <select value={this.state.destination} onChange={this.handleChange} name="destination">
                <option value="Berlin">Berlin</option>
                <option value="Tokyo">Tokyo</option>
                <option value="San Francisco">San Francisco</option>
                <option value="Rome">Rome</option>
                </select>   <br/>

            <label>Dietary restrictions</label>    <br/>
            <label>
            <input type="checkbox" name="isVegan" checked={this.state.isVegan} onChange={this.handleChange}/>Vegan
            </label>
            <label>
            <input type="checkbox" name="isKosher" checked={this.state.isKosher} onChange={this.handleChange}/>Kosher
            </label>
            <label>
            <input type="checkbox" name="isLactoseFree" checked={this.state.isLactoseFree} onChange={this.handleChange}/>Lactose Free
            </label>


            <h1>Entered information</h1>
            <p>Name: {this.state.firstName} </p>
            <p>Surname: {this.state.lastName} </p>
            <p>Age: {this.state.age} </p>
            <p>Gender: {this.state.gender} </p>
            <p>Destination: {this.state.destination} </p>
            <p>Dietary Restrictions: Vegan {this.state.isVegan ? "Yes" : "No"} , Kosher {this.state.isKosher ? "Yes" : "No"} , LactoseFree {this.state.isLactoseFree ? "Yes" : "No"}  </p>
            <button onClick="">Submit</button>
        
            </form>
            </main>
        )
    }
    }

    export default App;