Forms

[zamarrowski]

import React from 'react'
import CheckboxGroup from './CheckboxGroup'
export default props => 
    <>
        <label>Hobbies</label>
        <CheckboxGroup {...props} />
    </>

import React from 'react'

export default props => 
    <>
        {props.items.map((item) => (
            <span key={item}>
                <input checked={props.selectedItems.includes(item)} type="checkbox" onChange={props.onChange} value={item} />
                {item}
            </span>
        ))}

    </>

import React from 'react'
import InputText from './InputText'
import Textarea from './Textarea'
import GenderPicker from './GenderPicker'
import Select from './Select'
import ConditionalRender from './ConditionalRender'
import HobbiesPicker from './HobbiesPicker'
import CheckboxGroup from './CheckboxGroup'

export class Form extends React.Component {
    state = {
        name: '',
        firstname: '',
        description: '',
        gender: 'female',
        age: 27,
        selectedCountry: 'es',
        selectedProvince: 'guadalajara',
        selectedHobbies: ['games']
    }

    countries = [
        {
            value: 'es',
            text: 'Spain'
        },
        {
            value: 'usa',
            text: 'USA'
        }
    ]

    provinces = [
        {
            value: 'guadalajara',
            text: 'Guadalajara'
        },
        {
            value: 'madrid',
            text: 'Madrid'
        }
    ]

    hobbies = ['games', 'football', 'basketball', 'art']

    handleChangeInput = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    printState = (e) => {
        console.log(this.state)
        e.preventDefault()
    }

    onChangeHobbies = (e) => {
        if (e.target.checked) {
            this.setState({ selectedHobbies: [...this.state.selectedHobbies, e.target.value] })
        } else {
            this.setState({ selectedHobbies: this.state.selectedHobbies.filter(hobby => hobby !== e.target.value) })
        }
    }

    render() {
        return(
            <form onSubmit={this.printState}>
                <InputText 
                    label="Name"
                    name="name"
                    value={this.state.name} 
                    onChange={this.handleChangeInput} 
                />
                <br />
                <InputText 
                    label="Firstname"
                    name="firstname"
                    value={this.state.firstname} 
                    onChange={this.handleChangeInput} 
                />
                <br />
                <Textarea 
                    value={this.state.description} 
                    onChange={this.handleChangeInput} 
                    name="description" 
                    label="Description"
                />
                <br />
                <GenderPicker 
                    onChange={this.handleChangeInput}
                    label="Gender"
                    value={this.state.gender}
                />
                <br />
                <InputText 
                    value={this.state.age} 
                    onChange={this.handleChangeInput}
                    type="number"
                    name="age" 
                    label="Age"
                />
                <br />
                <Select 
                    items={this.countries}
                    value={this.state.selectedCountry}
                    name="selectedCountry"
                    onChange={this.handleChangeInput}
                />
                <br />
                <ConditionalRender if={this.state.selectedCountry === 'es'}>
                    <Select 
                        items={this.provinces}
                        value={this.state.selectedProvince}
                        name="selectedProvince"
                        onChange={this.handleChangeInput}
                    />
                </ConditionalRender>
                <HobbiesPicker 
                    items={this.hobbies} 
                    onChange={this.onChangeHobbies}  
                    selectedItems={this.state.selectedHobbies} 
                />
                <button type="submit">Enviar</button>
            </form>
        )
    }
}