JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css">
<div id="map" style="height:400px; width:400px"></div>
<button>Change popup</button>

JavaScript

// Display a map with a draggable marker
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/1afe592d39034cfd928b2ab7b201b13a/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);
var marker = L.marker([51.5, -0.09], {
    draggable: true
})
    

// Add a popup to the marker and save a reference to it
marker.bindPopup('Initial content');
marker.addTo(map);
marker.openPopup();
var popup = marker._popup;


$('button').click(function() {
    // Update the contents of the popup
    $(popup._contentNode).html('The new content is much longer so the popup should update how it looks.');
    
    // Calling _updateLayout to the popup resizes to the new content
    popup._updateLayout();
    
    // Calling _updatePosition so the popup is centered.
    popup._updatePosition();
    return false;
});