Passing data target as a prop

Question

I have two Bootstrap modals in the app, I see that a lot of people has had problems with that, can't open second modal..

Can I pass data-target and modal id property as props like this:

data-target={props.dataTargetID}
id={props.dataTarget}

It still shows one modal, but the other one doesn't.

EDIT: Modal component:

const OEModal = (props) => {
  return <div className="d-inline">
    <button type="button" className="btn btn-light btn-sm mt-2" data-toggle="modal" data-target={props.dataTargetID}>
  {props.name}
</button>
    <div className="modal fade" id={props.dataTarget} tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div className="modal-dialog" role="document">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel">{props.title}</h5>
        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div className="modal-body">
        <form>
          <div className="form-group">
            <label htmlFor="recipient-name" className="col-form-label">Recipe:</label>
            <input 
              name="recipeName"
              type="text" 
              value={props.recipeName} 
              onChange={props.handleChange}
              className="form-control"
              id="recipient-name" 
              placeholder="Recipe name"></input>
          </div>
          <div className="form-group">
            <label htmlFor="message-text"  className="col-form-label">Ingredients:</label>
            <textarea 
              value={props.recipeIngredients}
              onChange={props.handleChange}
              className="form-control"
              id="message-text"
              name="recipeIngredients"
              placeholder="Enter ingredients separated by commas..."></textarea>
          </div> 
        </form> 
        <div>
         <button 
            onClick={props.handleSubmit}
            data-dismiss="modal"
            type="button" 
            value="Save"
            className="btn btn-light btn-sm mr-2">Save</button>
        <button type="button" className="btn btn-primary btn-sm">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>
}

I'm using the component twice, once for adding recipe and editing recipe:

<OEModal 
        name="Add new recipe"
        recipeName={this.state.recipeName}
        recipeIngredients={this.state.recipeIngredients}
        handleSubmit={this.addRecipe} 
        handleChange={this.handleChange}
        title="Add a recipe"
        dataTarget="addModal"
        dataTargetID="#addModal"
        />

<OEModal 
           name="Edit recipe"
            title="Edit recipe" 
            dataTarget="editModal"
            dataTargetID="#editModal"
            onClick={this.props.handleSubmit}/>

Answer 1

You need to add a # to the button data-target

<button type="button" className="btn btn-light btn-sm mt-2" data-toggle="modal" data-target={"#" + props.dataTargetID}>