Programmatically add className to GeoJSON feature Popup in Leaflet

Question

I'm trying to add a className to a Popup with a function, but when I use a function, the code of the function itself gets returned. What am I doing wrong?

    function popUp(layer){
        return '<div class="d-inline-block border rounded px-1 mb-1"><b>#' + layer.feature.properties.id + '</b></div><h6 class="mb-0">' + layer.feature.properties.address + '</h6>' + 
        '<span class="text-muted d-block mb-2 small">(' + layer.feature.properties.coords + ')</span>' +
        '<span class="d-block">' + layer.feature.properties.subtype + '</span>' +
        '<a href="/report.php?report_id=' + layer.feature.properties.id + '">Go to Report</a>'
    };

    function customClass(layer){
        return layer.feature.properties.subject
    };

    L.geoJSON(points, {
        style: style,
        pointToLayer: function(feature, latlng) {
            return L.circleMarker(latlng, pointStyle);
        },
        onEachFeature: function(feature, layer){
             layer.bindPopup(popUp, {className: customClass})
        }
    }).addTo(map);

This is what is what ends up happening:

I am able to do this and get it to work:

className: layer.feature.properties.subject

But if I want to manipulate that value (say putting dashes where the spaces are), I don't know what to do

Answer 1

You just need to pass function call for className, not function definition, when binding popup to layer:

onEachFeature: function(feature, layer){
    layer.bindPopup(popUp, {className: customClass(layer)})
}