Component not re-rendering with this update of context - 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.
When I upload new JSONs to the layerList it gets updated but the <MAP/> component does not re-render.
I might be using a weird way of updating the state, but I dont know how to do 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 = [data]
function updateList(layer){
layerList.push(layer)
}
// Create an object of formData
const onFileChange = e => {
const fileReader = new FileReader();
fileReader.readAsText(e.target.files[0], "UTF-8");
fileReader.onload = e => {
updateList(JSON.parse(e.target.result));
console.log(layerList)
};
//console.log(layerList)
}
export const FileProvider = (props) => {
const [layer, setLayer] = useState(
layerList
)
return(
<FileContext.Provider value = {layer}>
{props.children}
</FileContext.Provider>
);
}
function FileUpload() {
return (
<div>
<div id='fileupload'>
<input type="file" onChange={onFileChange} />
</div>
</div>
);
}
export default FileUpload;

Answer 1

Your layerList exists and is maintained outside of the scope of your component. It's not aware of changes being made to the layerList in this fashion. You need to move your logic a little to look more like this:
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()
// Create an object of formData
const onFileChange = e => {
const fileReader = new FileReader();
fileReader.readAsText(e.target.files[0], "UTF-8");
fileReader.onload = e => {
updateList(JSON.parse(e.target.result));
console.log(layerList)
};
//console.log(layerList)
}
export const FileProvider = (props) => {
const [layerList, setLayerList] = useState([data]);
const updateList (layer) => {
setLayerList([layer, ...layerList]); //This creates a new array in memory, so it will trigger a rerender.
};
useEffect(() => {
//Update json file logic
}, [layerList])
return(
<FileContext.Provider value = {layerList, setLayerList}>
{props.children}
</FileContext.Provider>
);
}
function FileUpload() {
//change this component to be a context consumer and the 'onChange' event can fire the `setLayerList` function to update everything.
return (
<div>
<div id='fileupload'>
<input type="file" onChange={onFileChange} />
</div>
</div>
);
}
export default FileUpload;