REACT - CONTAINER / COMPONENT ARCHITECTURE

    //CONTAINER / COMPONENT ARCHITECTURE 
    // part how they look
    //Presentational Components and inner components
    //Divide into different files
    

    // APP.JS
    //CONTAINER COMPONENT ARCHITECTURE
    import React from 'react'
    import FormContainer from './components/FormContainer'
    import FormComponent from './components/FormComponent'

    function App(){
    return(
        <div>
        <FormContainer/>
        <FormComponent/>
        </div>
    )
    }

export default App;

    

    //FORM CONTAINER.JS
    import React from 'react'
    import FormComponent from './FormComponent'

    class FormContainer 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(
        <FormComponent 
        handleChange={this.handleChange}
        data={this.state}
        />)
    }
    }

    export default FormContainer;

        

    //FORMSCOMPONENT.JS
    import React from 'react'

    function FormComponent(props){
        return (
           <main>
           <form onSumbit="">
               <input type="text" value={props.data.firstName} name="firstName" placeholder="First Name" onChange={props.handleChange}>

               <input type="text" value={props.data.lastName} name="lastName" placeholder="Last Name" onChange={props.handleChange}>

               <input type="text" value={props.data.age} name="age" placeholder="Age" onChange={props.handleChange}>

    
               <label>
                Gender:
               <input type="radio" name="gender" value="male" checked={props.data.gender === "male"} onChange={props.handleChange}/> Male
               <input type="radio" name="gender" value="female" checked={props.data.gender === "female"} onChange={props.handleChange}/> Female
               </label>
               <br/>
    
               <label>Destination:  
               <select value={props.data.destination} onChange={props.handleChange} name="destination">
               <option value="Berlin">Berlin
               <option value="Tokyo">Tokyo
               <option value="San Francisco">San Francisco
               <option value="Rome">Rome
               </select>  <br/>
    
               <label>Dietary restrictions   <br/>
               <label>
               <input type="checkbox" name="isVegan" checked={props.data.isVegan} onChange={props.handleChange}/>Vegan
               </label>
               <label>
               <input type="checkbox" name="isKosher" checked={props.data.isKosher} onChange={props.handleChange}/>Kosher
               </label>
               <label>
               <input type="checkbox" name="isLactoseFree" checked={props.data.isLactoseFree} onChange={props.handleChange}/>Lactose Free
               </label>
    
    
               <h1>Entered information
               <p>Name: {props.data.firstName}</p>
               <p>Surname: {props.data.lastName}</p>
               <p>Age: {props.data.age}</p>
               <p>Gender: {props.data.gender}</p>
                <p>Destination: {props.data.destination} </p>
                <p>Dietary Restrictions: Vegan {props.data.isVegan ? "Yes" : "No"} , Kosher {props.data.isKosher ? "Yes" : "No"} , LactoseFree {props.data.isLactoseFree ? "Yes" : "No"}  </p>
                <button onClick="">Submit</button>
        
            </form>
            </main>
        )
        }



    export default FormComponent;