It's my first time posting - hello everyone!
I'm making an app that's going to help me memorize geographical data.
I have a map with markers on it, when I click on any of these markers a popup appears in which I have an input. I'm comparing the input value with input dataset to see if my answer was correct or not. The thing is, I would also like to change the color of the marker (ImageOverlay) to green as soon as my answer is correct and red if it's wrong (as soon as any value appears).
The main problem I have is that those markers are mapped from an object which is fetched from firebase, meaning that every single input has to change the color of the corresponding marker and that marker only.
I hope I explained it clearly. Thank you so much in advance!
displayPins that maps data from a firebase doc:
const displayPins = doc.map((d) => {
return (
<ImageOverlay
className="img-overlay"
key={d.id}
bounds={[
[d.latitude - 2, d.longitude - 2],
[d.latitude + 2, d.longitude + 2],
]}
interactive={true}
url={`./${d.shape}`}
>
<Popup>
<input type="text" data-tag={d.name} onChange={valueCompare}></input>
<button
onClick={() => {
console.log(test);
}}
></button>
</Popup>
</ImageOverlay>
);});
Input's onChange:
const valueCompare = (e) => {
const data = e.target.dataset.tag;
const value = e.target.value;
if (data != value) {
console.log("WRONG");
} else {
console.log("CORRECT");
}};
CSS
.img-overlay {
filter: brightness(0) saturate(100%);
}
.img-overlay-wrong {
filter: invert(10%) sepia(95%) saturate(7496%) hue-rotate(11deg)
brightness(97%) contrast(120%);
}
.img-overlay-correct {
filter: invert(69%) sepia(61%) saturate(4725%) hue-rotate(78deg)
brightness(112%) contrast(128%);
}
You need some extra state(s) to store the results of your quizzes and style your ImageOverlays accordingly.
A minimal change to your current code could consist in having an extra state dictionary:
function MapContent({ doc }) {
// State to store results
// { id: true or false (quizz result for doc id) }
const [resultsDictionary, setResults] = useState({});
function result2class(id) {
if (id in resultsDictionary) {
return resultsDictionary[id] ? "img-overlay-correct" : "img-overlay-wrong";
} else {
return "img-overlay";
}
}
const valueCompare = (e, id) => {
const data = e.target.dataset.tag;
const value = e.target.value;
let result;
if (data != value) {
console.log("WRONG");
result = false;
} else {
console.log("CORRECT");
result = true;
}
// Shallow clone to force React to see a change
setResults({
...resultsDictionary,
[id]: result, // new result
});
};
return (<>
{doc.map((d) => (
<ImageOverlay
className={result2class(d.id)}
key={d.id}
bounds={[
[d.latitude - 2, d.longitude - 2],
[d.latitude + 2, d.longitude + 2],
]}
interactive={true}
url={`./${d.shape}`}
>
<Popup>
<input type="text" data-tag={d.name} onChange={(e) => valueCompare(e, d.id)}></input>
<button
onClick={() => {
console.log(test);
}}
></button>
</Popup>
</ImageOverlay>
))}
</>);
}