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>
}
))