Call bootstrap modal from react

Looking at your code you need to separate the logic of your fields (username and password) with the handleLoginClick function.

You need to add some functions (handleUsernameChange and handlePasswordChange), which can synchronize what you have in the fields with the state of the component, something like this:

import React, { Component } from 'react';

class Login extends Component {
   constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: "",
        };

                this.handleloginClick = this.handleloginClick.bind(this);
                this.handleUsernameChange = this.handleUsernameChange.bind(this);
                this.handlePasswordChange = this.handlePasswordChange.bind(this);

    } //end constructor

    handleloginClick(event) {
      const username = this.state.username
      const password = this.state.password

      const datos = {
            username: username,
            password: password
      }

      fetch('http://theapi/api/auth', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
             body: JSON.stringify(datos)
      }) /*end fetch */

        .then(function(data) {
          console.log('data =', response);
          return data.json();
      })
        }

        handleUsernameChange(event) {
            this.setState({username: event.target.value});
        }

        handlePasswordChange(event) {
            this.setState({password: event.target.value});
        }

    render() {
      return (
         <div className="modal fade" id="writeData" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div className="modal-dialog" role="document">
              <div className="modal-content">
                <div className="modal-header">

                <h4 className="modal-title" id="exampleModalLabel">Identificaci&oacute;n</h4>
                </div>

                  <div className="modal-body">
                    <div className="form-group">
                      <label className="control-label label-default">Usuario:</label>
                      <input type="text" className="form-control input-sm" id="usr" data-toggle="tooltip" data-placement="top" onChange={this.handleUsernameChange} value={this.state.username}   required />
                      </div>
                       <div className="form-group label-default">
                      <label  className="control-label">Clave:</label>
                      <input type="password" className="form-control input-sm" id="pass" data-toggle="tooltip" data-placement="bottom" onChange={this.handlePasswordChange} value={this.state.password}  required />
                      </div>
                  </div>
                  <div className="modal-footer">
                    <button type="button" className="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="submit" className="btn btn-primary "  onClick={this.handleloginClick}  id="btnEnviar">Aceptar</button>
                  </div>

              </div>
            </div>
          </div>
        );
      }
}

export default Login;

This is what I advise you for what you want to achieve:

the modal appear automatically when you start the class

componentDidMount() {
  const modal = document.querySelector('#writeData');
  modal.classList.add('show');
}

Remember that the componentDidMount function is executed according to the React lifecycle Component, right after the HTML is added to the page.

When you click accept, call the handleloginClick function, passing it the username and password, and after calling the server, it returns anything.

handleloginClick(event) {
  this.setState({username: document.querySelector('#usr').value});
  this.setState({password: document.querySelector('#pass').value});
  ...fetch
}

This part of the code itself has some details, what happens with your code currently is that the function handleloginClickwill never have the target.valuein the event since the button is the one that triggers the event. That is why you must have another way of calling it, the one that I propose is not the best, but it is the one that is going to be that you do not make so many modifications in your current code.