<file_sep>import React, { Component } from 'react';


class HotelComentsForm extends Component {


  handleSubmit(e){
    e.preventDefault();
    let cal = Number(this.refs.calificacion.value);
    console.log(cal)
    if(cal == NaN){
        
        alert('Calificacion debe ser un numero');
    }else if(this.refs.calificacion.value<0 || this.refs.calificacion.value>5){
            alert('Calificacion debe ser entre 1 y 5');
    }else{
    let comentario = {
        nombre: this.refs.nombre.value,
        correo: this.refs.correo.value,
        comentario: this.refs.comentario.value,
        calificacion: this.refs.calificacion.value
    }
    this.props.handleComentario(comentario);
    }
  }

  render() {
    return(
    <div className='container'>
    <form onSubmit={this.handleSubmit.bind(this)} className='form-inline'>
        <div className='form-group'>
        <label>Nombre</label>
        <input type='text' className='form-control' ref='nombre'/>
        </div>
        <div className='form-group'>
        <label>Correo</label>
        <input type='textarea' className='form-control' ref='correo'/>
        </div>
        <div className='form-group'>
        <label>Comentario</label>
        <input type='text' className='form-control' ref='comentario'/>
        </div>
        <div className='form-group'>
        <label>Calificacion</label>
        <input type='text' className='form-control' ref='calificacion'/>
        </div>
        <input type='submit' className='btn btn-default'/>
    </form>
    </div>
    );
  }
}

export default HotelComentsForm;
<file_sep>import React, { Component } from 'react';


class HotelComents extends Component {


  render() {
    
     let comentarios = this.props.comentarios;
     let comentArray = Object.values(comentarios);
     let comentariosA = comentArray.map((comentario)=>{
         return(
             <div className='row'>
            <ul className="list-group">
            <li className="list-group-item">Nombre</li>
            <li className="list-group-item">{comentario.nombre}</li>
            <li className="list-group-item">Email</li>
            <li className="list-group-item">{comentario.correo}</li>
            <li className="list-group-item">Comentario</li>
            <li className="list-group-item">{comentario.comentario}</li>
            <li className="list-group-item">Calificacion</li>
            <li className="list-group-item">{comentario.calificacion}</li>
          </ul>
          </div>
         )
     })
    return (
  <div className="col-sm-6 col-md-4">
    {comentariosA}
  </div>
    );
  }
}

export default HotelComents;
<file_sep>import React, { Component } from 'react';


class HotelAdd extends Component {


  handleSubmit(e){
    e.preventDefault();
    let comentarios = [];
    let hotel = {
      nombre: this.refs.nombre.value,
      descripcion: this.refs.descripcion.value,
      ciudad: this.refs.ciudad.value,
      imagen: this.refs.nombre.value + ".jpg",
      uLatitud: this.refs.ulatitud.value,
      uLongitud: this.refs.ulongitud.value,
      costo: this.refs.costo.value,
      comentarios: comentarios
    };
    let image = this.refs.image.files[0];
    this.props.handleAdd(hotel, image);
    this.props.changePrincipal();
  }

  render() {
    return(
    <div className='container'>
    <form onSubmit={this.handleSubmit.bind(this)}>
        <div className='form-group'>
        <label>Nombre del hotel</label>
        <input type='text' className='form-control' ref='nombre'/>
        </div>
        <div className='form-group'>
        <label>Descripcion</label>
        <input type='textarea' className='form-control' ref='descripcion'/>
        </div>
        <div className='form-group'>
        <label>Ciudad</label>
        <input type='text' className='form-control' ref='ciudad'/>
        </div>
        <div className='form-group'>
        <label>Costo del hotel</label>
        <input type='text' className='form-control' ref='costo'/>
        </div>
        <div className='form-group'>
        <label>Latitud</label>
        <input type='text' className='form-control' ref='ulatitud'/>
        </div>
        <div className='form-group'>
        <label>Longitud</label>
        <input type='text' className='form-control' ref='ulongitud'/>
        </div>
        <div className='form-group'>
        <label>Subir foto del hotel</label>
        <input type='file' ref='image' accept='image/*'/>
        <p className='help-block'>Imagen para el banner del hotel</p>
        </div>
        <input type='submit' className='btn btn-default'/>
    </form>
    </div>
    );
  }
}

export default HotelAdd;
<file_sep>import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
import React, { Component } from 'react';

export class MapContainer extends Component {
  render() {
      let style = this.props.style;
      let latitud = this.props.latitud;
      let longitud = this.props.longitud;
      console.log(latitud);
    return (
        <div className="contenedor">
      <Map google={this.props.google} initialCenter ={{
        lat: latitud,
        lng: longitud
      }} style={style} zoom={14}>
 
        <Marker onClick={this.onMarkerClick}
                name={'Current location'} />
 
        <InfoWindow onClose={this.onInfoWindowClose}>
            <div>
              <h1>{'this.state.selectedPlace.name'}</h1>
            </div>
        </InfoWindow>
      </Map>
      </div>
    );
  }
}
 
export default GoogleApiWrapper({
  apiKey: ('<KEY>')
})(MapContainer)