Object not recognized as JSON object - json

Question

Short story: I am making my own GIS (geographic information system) and want to be able to upload JSON files with geographical data. I do not however want to save files in a database, just in a list. Furthermore I'm using Context to parse data to the <MAP/> (leaflet) component.
My problem is that when pushing the JSON to the list it is not recogniezed as a JSON but as string. How can I solve this problem.
I am quite new to react so I am open for suggestions to solve it differently.
Here is my code
import React, {createContext, useState} from 'react';
import "../../App.css";
import data from '../../Layers/layer1.json'
import data1 from '../../Layers/layer2.json'
export const FileContext = createContext()
const layerList = []
function updateList(layer){
layerList.push(layer)
}
export const FileProvider = (props) => {
const [layer, setLayer] = useState(
layerList
)
return(
<FileContext.Provider value = {[layer, setLayer]}>
{props.children}
</FileContext.Provider>
);
}
// Create an object of formData
const onFileChange = e => {
const fileReader = new FileReader();
fileReader.readAsText(e.target.files[0], "UTF-8");
fileReader.onload = e => {
console.log(e.target.result);
updateList(e.target.result);
console.log(layerList)
};
//console.log(layerList)
}
function FileUpload() {
return (
<div>
<div id='fileupload'>
<input type="file" onChange={onFileChange} />
</div>
</div>
);
}
export default FileUpload;
And this is the Map component
import { Map, TileLayer, GeoJSON} from 'react-leaflet'
import "../App.css";
import data from '../Layers/layer1.json'
import { FileContext } from '../LandingPage/ToolbarComponents/FileUpload';
function MapOslo() {
const [layer, setLayer] = useContext(FileContext)
return (
<Map center={[59.93, 10.75]} zoom={4}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
<GeoJSON data={layer} style={['color','#006400']} />
</Map>
);
}
export default MapOslo;

Answer 1

To convert a String to JSON you can use JSON.parse(str)
var jsonStr = "{test: 'hi'}";
var json = JSON.parse(jsonStr);
So I think you have to implement parse here: updateList(JSON.parse(e.target.result));