I am getting the following error:
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Followed by:
The above error occurred in the "Chart" component
my only use of the Chart component (which is from the grommet compontent lib) comes from this bit of code:
import {Chart} from 'grommet';
const WaveForm = (props:any):JSX.Element => {
const size= props.waveForm.length
const color = props.isRecording?"recording":props.isPrimed?"primed":"brand";
return (
<Chart
bounds={[[0,Math.max(1000,size)], [-25,25]]}
values= {props.waveForm.map((e:number,i:number) => ({value:[i, e, -e]}))}
size={{"width": "fill",height:"75%"}}
round={true}
color={color}
thickness="hair"
/>
);
}
export default WaveForm;I cannot for the life of me see why this is causing endless re-renders. Any help would be greatly appreciated.
The issue seemed to be due to an issue with the Grommet Chart handles 'fill'. Changing
size={{"width": "fill",height:"75%"}}
to
size={{"width": "100%",height:"75%"}}
fixed the issue