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

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.

Experiencing the same problem with SparklineComponent when the browser resized. If anyone finds a solution, please share it here with us. Thanks. — Yusuf Yeşilyurt, Aug 29 '22 at 17:21

score 0 · Answer 1 · answered Dec 07 '22 at 04:08

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>
  }

}

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

1 Answers1