How to correctly use React props within a data-target?

Question

How to correctly use React props within a data-target?

Navigation

#1 by (0 votes)

0

I would like to know how to use props within a data-target attribute of a 'Modal'

this would be my code for the button that activates the Modal

<button type="button" className="btn btn-primary btn-block" data-toggle="modal" data-target={'#'+this.props.id}>{this.props.name}</button>

and this one of El Modal ...

{/*Modal Start*/}
<div className="modal fade" **id={this.props.id}** role="dialog">
    <div className="modal-dialog modal-lg">
      <div className="modal-content">
        <div className="modal-header">
          <button type="button" className="close" data-dismiss="modal">&times;</button>
          <h4 className="modal-title">{this.props.name}</h4>
        </div>
        <div className="modal-body">
          <p>This is a large modal.</p>
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>


{/* Modal end */}

Example ... when hardcoding data-target and I put "#test" and in the id inside the Modal I put "test" the modal works correctly. but when I replace them with values of props, Modal does not work for me,

Greetings ..

javascript react

asked by IceClimberMx 26.11.2017 в 18:22

source

1 answer

What are the abstract data types? Add data to a one column of a DataGrid C #

score 0 · Answer 1

It sounds to me that, since the modal is not loaded in the DOM of the page (since it exists only until React rendered it), the jQuery instruction fails.

Try the following: in the scripts section of your page, include a feature:

showModal = function(idModal) {
    $(document).find('#' + idModal).modal();
}

and replace in React your button to invoke the function in the onClick event:

<button type="button" className="btn btn-primary btn-block" onClick={() => showModal(this.props.id)}>{this.props.name}</button>