2

Tengo el siguiente codigo:

import React from 'react';
import url from '../url';

const LugarModal = ({rutas,lugars,onChange}) =>(
    <div className="modal fade modal_ruta" role="dialog" aria-hidden="true">
        <div className="modal-dialog modal-sm">
            <div className="modal-content">

                <div className="modal-header" >
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span>
                    </button>
                    <h4 className="modal-title" id="myModalLabel2"><b>Agregar Rutas </b></h4>
                </div>
                <div className="modal-body" >
                    <form action="">
                        <div className="clearfix"></div>
                        <div className="x_content">

                            <div className="row">
                                <div className="col-md-3 col-sm-3 col-xs-12 form-group has-feedback" >
                                    <label>Lugar de Origen:</label>
                                </div>
                                <div className="col-md-9 col-sm-9 col-xs-12 form-group has-feedback">
                                    <select onChange={onChange} value={rutas.lugar_origen_id} required readOnly className="form-control" name="lugar_origen_id" id="lugar_origen_id">
                                        {
                                            lugars.map((lugar)=>(
                                                <option key={lugar.id} value={lugar.id}>{lugar.nombre}, {lugar.departamento}</option>
                                                ))
                                        }
                                    </select>
                                    <span className="fa fa-random form-control-feedback right" aria-hidden="true"></span>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-md-3 col-sm-3 col-xs-12 form-group has-feedback" >
                                    <label>Lugar Destino:</label>
                                </div>
                                <div className="col-md-9 col-sm-9 col-xs-12 form-group has-feedback">
                                    <select onChange={onChange} value={rutas.lugar_destino_id} required className="form-control" name="lugar_destino_id" id="lugar_destino_id">
                                        <option value="">Seleccion Un Lugar</option>
                                        {
                                            lugars.map((lugar)=>(
                                                if(lugar.id != rutas.lugar_origen_id){
                                                    <option key={lugar.id} value={lugar.id}>{lugar.nombre}, {lugar.departamento}</option>    
                                                }
                                                ))
                                        }
                                    </select>
                                    <span className="fa fa-refresh form-control-feedback right" aria-hidden="true"></span>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-md-3 col-sm-3 col-xs-12 form-group has-feedback" >
                                    <label> Ruta:</label>
                                </div>
                                <div className="col-md-9 col-sm-9 col-xs-12 form-group has-feedback">
                                    <input onChange={onChange} value={rutas.ruta} type="text" className="form-control" name="ruta" id="ruta" required placeholder="Camina1 | Camino2 | Camino3 | Camino4"/>
                                    <span className="fa fa-tag form-control-feedback right" aria-hidden="true"></span>
                                </div>
                            </div>
                            <div className="row">
                                <div className="col-md-3 col-sm-3 col-xs-12 form-group has-feedback" >
                                    <label> Distancia:</label>
                                </div>
                                <div className="col-md-9 col-sm-9 col-xs-12 form-group has-feedback">
                                    <input onChange={onChange} value={rutas.distancia} type="text" className="form-control" name="distancia" id="distancia" required placeholder="30 km" />
                                    <span className="fa fa-tag form-control-feedback right" aria-hidden="true"></span>
                                </div>
                            </div>
                            <div className="row">
                                <button type="submit" id="btn_submit" className="btn btn-success"><i className="fa fa-save"></i>Guardar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
);

export default LugarModal;

Lo que deseo hacer es que en lugar_destino_id solo aparezcan los lugares diferentes a lugar_origen_id como forma de validar que no seleccionen el mismo lugar en ambos select.

Mi problema es que apenas inicio con react y no sé como hacerlo. El código específico sería:

lugars.map((lugar)=>(
    if(lugar.id != rutas.lugar_origen_id){
        <option key={lugar.id} value={lugar.id}>{lugar.nombre}, {lugar.departamento}</option>    
    }
))

1 respuesta 1

4

Antes de usar map usa filter para eliminar los que no quieras:

lugars.filter(lugar => lugar.id != rutas.lugar_origen_id)
.map(lugar => (
        <option key={lugar.id} value={lugar.id}>{lugar.nombre}, {lugar.departamento}</option>))

Son métodos propios de la clase Array, no son parte de React. Te aconsejo mirar el API de Array porque tiene muchos métodos interesantes que usarás a menudo.

1
  • Valla que buena solucion, gracias por la respuesta y ahora mismo me pondre a leer el link que me dejaste.gracias.
    – Shassain
    Commented el 19 dic. 2019 a las 16:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.