Error changing marker icon when clicked in Leaflet

Question

I am trying to highlight a marker using a different icon when clicked. There are many posts about it but I am getting different error:

.setIcon is not a function.

This is my point data and the click event on it:

var schoolP = new L.GeoJSON.AJAX('data/schools.json', {pointToLayer:function(feature,latlng){
  var str= "<h6><b>"+feature.properties.sch_name+", "+feature.properties.sch_loc+"</b><br>Primary Schools</h6>";
     return L.marker(latlng,{icon: primaryIcon}).bindPopup(str);                             
}});
         
schoolP.addTo(mymap);

// When click
schoolP.on('click', function(e) {
    schoolP.setIcon(highlightIcon);
});

Below is how I defined the marker icons:

//primary school icon
var primaryIcon = new L.Icon({
  iconUrl: '/webmap101/img/schoolP.png',
  iconSize: [40, 61],
  iconAnchor: [12, 41],
  popupAnchor: [120, 30]
});


//icon when highlight
var highlightIcon = new L.Icon({
  iconUrl: '/webmap101/img/SchoolHighlight.png',
  iconSize: [60, 81],
  iconAnchor: [12, 41],
  popupAnchor: [120, 30]
});

Answer 1

With your code you are trying to set different icon to whole schoolP layer, which cant be done. You have to set new icon to clicked marker layer. You can get clicked marker layer from click event e by property e.propagatedFrom (see https://leafletjs.com/reference.html#event).

So relevant part of the code should the look something like:

schoolP.on('click', function(e) {
  e.propagatedFrom.setIcon(highlightIcon);
});