SparklineComponent(...): Nothing was returned from render - reactjs

Question

I'm building out this project in react and using charts from syncfusion. I'm getting the error that's in the title of this post. It's only when I zoom in and out a bunch or if I close my side bar a few times. The amount of times needed to make this happen is completely random. Here's a few pieces of code
const SparkLine = ({id, height, width, color, data, type, currentColor}) => {
return (
<SparklineComponent
height={height}
width={width}
lineWidth={1}
valueType="Numeric"
fill={color}
border={{ color: currentColor, width: 2 }}
dataSource={data}
xName="xval"
yName="yval"
type={type}
tooltipSettings={{
visible: true,
format: '${xval} : data ${yval}',
trackLineSettings: {
visible: true
}
}}
>
<Inject services={[SparklineTooltip]} />
</SparklineComponent>
)
}
That's the component that returns SparklineComponent which is from the library #syncfusion/ej2-react-charts.
It's saying that it's the actual SparklineComponent that's in that library not any component that I made that's not returning anything. Here's the rest of the chain of code that leads to my index.js
<div className='mt-5'>
<SparkLine
currentColor='blue'
id='line-sparkline'
type='Line'
height='80px'
width='250px'
data={SparklineAreaData}
color='blue'
/>
</div>
This is just a snippet of code from a component called Ecommerce. It returns, at one point in the jsx, the SparkLine component from above. The next one is
<Routes>
{/* Dashbord */}
<Route path='/' element={<Ecommerce />} />
<Route path='/ecommerce' element={<Ecommerce />} />
That's my app.js which is wrapped by a context provider in my index.js
ReactDOM.render(
<ContextProvider>
<App />
</ContextProvider>
, document.getElementById('root')
);
The problem seems to be coming from the activeMenu variable from the state hook I have in my context provider which is used to open and close the side bar when you click the appropriate button or when you zoom in close(small screen size). Here's my ContextProvider
export const ContextProvider = ({children}) => {
const [activeMenu, setActiveMenu] = useState(true);
const [isClicked, setIsClicked] = useState(initialState);
const handleClick = (clicked) => {
setIsClicked({ ...initialState, [clicked]: true})
}
const [screenSize, setScreenSize] = useState(undefined)
console.log(`context provider ${activeMenu}${isClicked.userProfile}${initialState.userProfile}`);
return (
<StateContext.Provider value={{ activeMenu, setActiveMenu, isClicked,
setIsClicked, handleClick, screenSize, setScreenSize,}}>
{children}
</StateContext.Provider>
)
}
export const useStateContext = () => useContext(StateContext);
When I remove the activeMenu variable from app.js that I pull out from useStateContext which I've imported there everything works fine. I have absolutely no idea why.

Answer 1

The Solution is to use "Class Component" and extends "React.PureComponent"
import React from 'react'
import { SparklineComponent, Inject, SparklineTooltip } from '#syncfusion/ej2-react-charts'
export default class SparkLineChart extends React.PureComponent
{
render()
{
const { id, type, height, width, data, currentColor, color } = this.props;
return <SparklineComponent
id={id}
height={height}
width={width}
lineWidth='1'
valueType='Numeric'
type={type}
fill={color}
border={{ color: currentColor, width: 2 }}
dataSource={data}
xName='x-axis'
yName='y-axis'
tooltipSettings={{
visible: true,
format: 'X : ${x-axis} , Y : ${y-axis}',
trackLineSettings: { visible: true }
}}
>
<Inject services={[SparklineTooltip]} />
</SparklineComponent>
}
}