ReactJS - The modal isn' t working on the first Click

Question

The modal is not working on the first click. Only from the second onwards. Does anyone know how to solve it? Thank you

Note: No need to mind if the jquery's append part is ugly I'll fix it later.

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';

    import DribbbleMoreInfo from './DribbbleMoreInfo';

    export default class Dribbble extends React.Component {
        constructor(props) {
        super(props);

    this.state = {
      hover: false,
      info: null
    };

    this.handleClick = this.handleClick.bind(this);

    }   

    handleClick() {   
      $('body').append('<div id="modal' + this.props.data.id + '" class="modal 
      fade" role="dialog"><div class="modal-dialog"><div class="modal-content">
     <div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><img class="avatar img-circle" src="' + this.props.data.user.avatar_url + '"/><h3>' + this.props.data.user.name + '</h3></div><div class="modal-body"><p>' + this.props.data.description + '</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>');

     }

     render() {

    const shots = <li      
      className="box"
      data-toggle="modal"
      data-target={"#modal" + this.props.data.id}  
      onClick={this.handleClick}     
    >
        <div>
             <img className="cover" src={this.props.data.images.normal} />
             <div className="bar">
                <h2>{this.props.data.title}</h2>
                <span>{this.props.data.views_count}</span>           
                <i className="fa fa-eye fa-2x" aria-hidden="true"></i>           
             </div>
        </div>

    </li>;   

    return shots;
   }

This code below is the parent component. Maybe it will be userful to understand about the issue that is happening in the child component, I don't know.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Waypoint from 'react-waypoint';
import Dribbble from './Dribbble';

export default class Dribbbles extends Component {
    constructor(props) {
    super(props);
       this.state = { page: 1, shots: [] };    
       this.getShots = this.getShots.bind(this);
    }

    componentDidMount() {
       this.getShots();
    }

   getShots() {
      this.setState({
      dataFetched: false
   })
   return $.getJSON('https://api.dribbble.com/v1/shots?page=' + 
   this.state.page +  '&access_token=41ff524ebca5e8d0bf5d6f9f2c611c1b0d224a1975ce37579326872c1e7900b4&callback=?')   

  .then((resp) => {
    var newShots = this.state.shots.concat(resp.data);       
    this.setState({        
      page: this.state.page + 1,
      shots: newShots,
      dataFetched:true
    });           
  });
}

render() {
  const shots = this.state.shots.map((data, i) => {
  return <Dribbble data={data} key={i} />
});

return (
  <div>          
    <ul>{shots}</ul>
    {this.state.dataFetched && <Waypoint onEnter={this.getShots} />}
  </div>
);

} }

Thank you

Answer 1

Now I'm using the react-bootstrap's modal and it is working perfectly.