Bug al abrir modal, genera bucle

Lista.jsx

import React from "react";
import {
  ControlLabel,
  FormGroup,
  FormControl,
  Panel,
  Button
} from "react-bootstrap";
import { connect } from "react-redux";
import ReactTable, { ReactTableDefaults } from "react-table";
import ModalChips from "./ModalChips";
import "react-table/react-table.css";
import {
  loadUsers,
  connectSocket,
  loadCurrentUser,
  clearClipsToUserModule
} from "../../actionCreators";

Object.assign(ReactTableDefaults, {
  defaultPageSize: 10,
  minRows: 3,
  previousText: "Anterior",
  nextText: "Siguiente",
  loadingText: "Cargando...",
  noDataText: "No hay Registros",
  pageText: "Pagina",
  ofText: "de",
  rowsText: "Filas",
  sortable: true,
  resizable: true
});

class ListUsers extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nameError: false,
      emailError: false,
      selectValue: "",
      isVisible: false
    };
    this.handlerLoadUser = this.handlerLoadUser.bind(this);
    this.handleChangeValueSelect = this.handleChangeValueSelect.bind(this);
    this.handlerClose = this.handlerClose.bind(this);
  }

  handleChangeValueSelect(e) {
    this.setState({
      selectValue: e.target.value
    });
    this.props.actions.clearClipsToUserModule();
  }
  handlerClose() {
    this.props.actions.clearClipsToUserModule();
    this.setState({
      isVisible: false
    });
  }
  componentDidMount() {
    this.props.actions.connectSocket();
    this.props.actions.loadUsers();
  }

  handlerLoadUser(row) {
    const { selectValue } = this.state;
    if (selectValue) this.props.actions.loadCurrentUser(row.original);
    this.setState({
      isVisible: true
    });
  }

  render() {
    const { users, dispositivo } = this.props;
    const { selectValue } = this.state;
    const columns = [
      { Header: "Username", accessor: "username" },
      { Header: "Correo", minWidth: 170, accessor: "email" },
      { Header: "Nombres", minWidth: 170, accessor: "first_name" },
      { Header: "Apellidos", minWidth: 170, accessor: "last_name" },
      { Header: "Cédula", minWidth: 170, accessor: "document" },
      { Header: "Rol", minWidth: 170, accessor: "rol" },
      {
        Header: "",
        filterable: false,
        Cell: row => (
          <Button
            onClick={() => {
              this.handlerLoadUser(row);
            }}
          >
            Asociar
          </Button>
        )
      }
    ];
    return (
      <div>
        <Panel header="Asociar Clip a Usuario">
          <FormGroup controlId="formControlsSelect">
            <ControlLabel>Dispositivo</ControlLabel>
            <FormControl
              onChange={e => this.handleChangeValueSelect(e)}
              componentClass="select"
              placeholder="select"
            >
              <option value="">Seleccione</option>
              <option value="t1e">Torre 1 Entrada</option>
              <option value="t1s">Torre 1 Salida</option>
            </FormControl>
          </FormGroup>
          {users ? (
            <ReactTable
              filterable
              data={users}
              columns={columns}
              props={this.props}
              defaultPageSize={10}
              className="-striped -highlight"
            />
          ) : null}
        </Panel>
        {this.state.isVisible ? (
          <ModalChips
            show={this.state.isVisible}
            selectValue={selectValue}
            dispositivo={dispositivo}
            handlerClose={this.handlerClose}
          />
        ) : null}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  users: state.users.records,
  dispositivo: state.currentChip.dispositivo
});
const mapDispatchToProps = dispatch => ({
  actions: {
    loadUsers: () => dispatch(loadUsers()),
    connectSocket: () => dispatch(connectSocket()),
    loadCurrentUser: user => dispatch(loadCurrentUser(user)),
    clearClipsToUserModule: () => dispatch(clearClipsToUserModule())
  }
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ListUsers);

Modal.jsx

import React from "react";
import { connect } from "react-redux";
import { Table, Alert, Modal, FormGroup, Button } from "react-bootstrap";
import MenuAssociateChip from "./MenuAssociation";
import createClass from "create-react-class";

const ModalChips = createClass({
  getInitialState() {
    return {
      showModal: true
    };
  },
  componentWillUnmount() {
    this.setState({
      showModal: false
    });
  },
  render() {
    const {
      selectValue,
      dispositivo,
      first_name,
      last_name,
      numero,
      document
    } = this.props;
    return (
      <Modal show={this.state.showModal} onHide={this.props.handlerClose}>
        <Modal.Header handlerCloseButton>
          <Modal.Title>Asociar Chip a Usuario</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {selectValue ? (
            <FormGroup controlId="formControlsSelect">
              <Table responsive>
                <thead>
                  <tr>
                    <th>Usuario</th>
                    <th>Identificación</th>
                    <th>Numero</th>
                    <th>Dispositivo</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      {first_name} {last_name}
                    </td>
                    <td>{document}</td>
                    <td>{numero}</td>
                    <td>{dispositivo}</td>
                  </tr>
                </tbody>
              </Table>
              {"\n"}
              {dispositivo === selectValue ? (
                <MenuAssociateChip handlerClose={this.props.handlerClose} />
              ) : numero ? (
                <Alert bsStyle="warning">
                  <h4>Advertencia!</h4>
                  <p>Seleccione otro Dispositivo</p>
                </Alert>
              ) : null}
            </FormGroup>
          ) : (
            <Alert bsStyle="warning">
              <h4>Advertencia!</h4>
              <p>Debe seleccionar un dispositivo</p>
            </Alert>
          )}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.handlerClose}>Cerrar</Button>
        </Modal.Footer>
      </Modal>
    );
  }
});

const mapStateToProps = state => ({
  numero: state.currentChip.numero,
  first_name: state.registrationForm.first_name,
  last_name: state.registrationForm.last_name,
  document: state.registrationForm.document
});

export default connect(
  mapStateToProps,
  null
)(ModalChips);