leaflet popup string html not displaying correctly using react.js

Question

I have the following code that tries to display html in the popup:

layer.bindPopup(
  `<p data data-campaign="4" data-token="${this.state.reg_mapping[feature.properties.name]}">
  <h4>Region: ${feature.properties.name}</h4>
  <h4 data-token-re></h4>
  <button type="submit" data-button>Donate Now</button>
</p >`
);

The problem is that I expect the p tag to be the parent of all elements, but when I'm in inspector I can see that the p tag closes thus is not the parents of the other elements. How can this be fixed ?

EDIT: Im using react.js

Answer 1

Replace your <p> with a <div>. Paragraphs cannot contain header <h4> tags.