I'm kinda lost. Basically, i'm trying to use this [map SVG for react][1]. And I am trying to highlight a specific part on the map when a button/checkbox is clicked by pushing an object to an Array. The object is pushed successfully (I console logged it and can see the new object in the array). However, the map doesn't highlight for some reason. Here's a copy of my entire code:
import './App.css';
import React from 'react';
import Worldmap from 'react-svg-worldmap';
import './styles/map.css'
function App() {
function highlightUS () {
data.push({country: "us", value: 1000000});
console.log(data)
}
const data = [
{ country: "cn", value: 1389618778 }, // china
{ country: "in", value: 1311559204 }, // india
];
console.log(data)
return (
<div className="App">
<header>
Testing Map
</header>
<Worldmap
color="blue"
title="World Language Map"
value-suffix="languages"
size="xl"
data={data}
/>
<div className="langBox">
<h1>Language Search</h1>
<input type="checkbox" id='usa' onClick={highlightUS}/> USA
<input type="checkbox" id='canada'/> Canada
<input type="checkbox" id='brazil'/> Brazil
<input type="checkbox" id='uk'/> UK
</div>
</div>
);
}
export default App;Like I said, it successfully pushes the highlightUS object into the data array but the country doesn't get highlighted. [1]: https://www.npmjs.com/package/react-svg-worldmap