editar gyms

src\views\gym\component\Form.jsx

import React, {useState, useEffect} from 'react'

const Form = ({gym}) => {
    const [isDisabled, setIsDisabled] = useState(true)
    const [name, setName] = useState('')
    const [description, setDescription] = useState('')
    const [address, setAddress] = useState('')
    const [image, setImage] = useState('')
    const [phone, setPhone] = useState('')
    const [atention, setAtention] = useState('')
    const [size, setSize] = useState('')

    let handleOnChange = e => {
        switch (e.target.id) {
            case "gym":
                setName(e.target.value)
                break;
            case "description":
                setDescription(e.target.value)
                break;
            case "address":
                setAddress(e.target.value)
                break;
            case "image":
                setImage(e.target.value)
                break;
            case "phone":
                setPhone(e.target.value)
                break;
            case "atention":
                setAtention(e.target.value)
                break;
            case "size":
                setSize(e.target.value)
                break;
            default:
                break;
        }
    }

    useEffect(() => {
        setAtention(gym.atention)
        setDescription(gym.description)
        setImage(gym.photo)
        setName(gym.name)
        setPhone(gym.phone)
        setSize(gym.size)
        setAddress(gym.address)
    }, [gym])

    
    
    const updateGym = () =>{
        
    }

    const makeEditable = () => {
        setIsDisabled(!isDisabled)
    }

    return(
        <form>
            <div class="pl-lg-4">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group text-left">
                            <label class="form-control-label" for="input-address">Gimnasio</label>
                            <input id="gym" class="form-control" type="text" value={name} onChange={handleOnChange} disabled={isDisabled} />
                        </div>
                        <div class="form-group text-left">
                            <label class="form-control-label">Descripcion</label>
                            <textarea rows="4" id="description" type="text" class="form-control" value={description} onChange={handleOnChange} disabled={isDisabled} ></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8">
                        <div class="form-group text-left">
                            <label class="form-control-label" for="input-city">Direccion</label>
                            <input type="text" id="address" class="form-control" value={address} onChange={handleOnChange} disabled={isDisabled} />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group text-left">
                            <label class="form-control-label" for="input-address">Imagen</label>
                            <input id="image" class="form-control" type="text" value={photo} onChange={handleOnChange} disabled={isDisabled} />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8">
                        <div class="form-group text-left">
                            <label class="form-control-label" for="input-city">Telefono</label>
                            <input type="text" id="phone" class="form-control" value={phone} onChange={handleOnChange} disabled={isDisabled} />
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group text-left">
                            <label class="form-control-label" for="input-country">Horario de atención</label>
                            <input type="text" id="atention" class="form-control" value={atention} onChange={handleOnChange} disabled={isDisabled} />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8">
                        <div class="form-group text-left">
                            <label class="form-control-label" for="input-city">Tipo de publicidad</label>
                            <select className="form-control" id="size" value={size} onChange={handleOnChange} disabled={isDisabled}>
                                <option value="small">Small</option>
                                <option value="medium">Medium</option>
                                <option value="big">Big</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="my-4" />
            <div className="pull-right">
                {
                    isDisabled ?
                        <button type="button" className="btn btn-warning" onClick={makeEditable}>Editar</button>
                    :
                    <button type="button" className="btn btn-warning" onClick={updateGym}>Guardar cambios</button>
                }
                <button type="button" className="btn btn-secondary">Cancelar</button>
            </div>
        </form>
    )
}

export default Form