Estoy un poco perdido. Básicamente, estoy tratando de usar este [mapa SVG para reaccionar] [1]. Y estoy tratando de resaltar una parte específica en el mapa cuando se hace clic en un botón/casilla de verificación al empujar un objeto a una matriz. El objeto se empuja con éxito (la consola lo registré y puedo ver el nuevo objeto en la matriz). Sin embargo, el mapa no se destaca por alguna razón. Aquí hay una copia de mi código completo:
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;Como dije, inserta con éxito el objeto de resaltado de EE. UU. en la matriz de datos, pero el país no se resalta. [1]: https://www.npmjs.com/package/react-svg-worldmap