How to do an if conditional in react.js inside a javascript map?

I have the following code:

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;

What I want to do is that lugar_destino_idonly the different places appear lugar_origen_idas a way to validate that they do not select the same place in both select.

My problem is that I just started with reactand I don't know how to do it. The specific code would be:

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