I have a mapbox React.js component implemented with DeckGl
I am trying to make my Pathlayer color changes on evenry mouse click (onClick), using onClick, getColor, getFillColor. As you see I have already the mechanism that detects that an item is clicked selectedItem which returns an object (with all item's infos) but the color change does not seem to work.
const [selectedItem, setSelectedItem] = useState("");
const layers = [
new PathLayer({
id: "CanalisationData",
data: reseauData,
pickable: true,
widthScale: 3,
widthMinPixels: 2,
autoHighlight: true,
highlightColor: [255, 255, 255],
getPath: (d) => d.GEOJSON.coordinates,
onHover: (info) => setHoverCanalisations(info),
onClick: (d) => setSelectedItem(d.object),
getColor: d => findColor(d),
getFillColor: d => selectedItem ? [255,0,0] : [119, 136, 153],
updateTriggers: {
getFillColor: [selectedItem]
})],
My idea is to say to the code :
if selectedItem ===> make the selected item look [255,0,0] color else ===> just let it with the basic color.
What Am I doing wrong ?
Edit : After AdriSolid's answer I have modified my PathLayer code like this, knowing that I get my selectedItem from a useState hook setSelectedItem that is linked to the OnClick just above :
const [selectedItem, setSelectedItem] = useState("");
const layers = [
new PathLayer({
id: "CanalisationData",
data: reseauData,
pickable: true,
widthScale: 3,
widthMinPixels: 2,
autoHighlight: true,
highlightColor: [255, 255, 255],
getPath: (d) => d.GEOJSON.coordinates,
onHover: (info) => setHoverCanalisations(info),
onClick: (d) => setSelectedItem(d.object),
getColor: d => selectedItem?[255,200,0]: [119, 136, 153],
updateTriggers: {
getColor: {selectedItem}
},
}),
It seems like that my coe is not detecting that I am actually selecting an item,
getFillColor: d => selectedItem ? [255,0,0] : [255, 255, 255],
Doesn't seem to work.
Here is an image on my map, the objectif is to make the grays lines change color by clicking on each of them ...