use axios data fetch conditionally

Question

I have a side pane component which can display different data depending on a button clicked.

I am using switch in function for that case, which is then rendered

const sidePaneComponent = (sidePane) => {    

  const renderSwitch = () => { 
    switch (sidePane.type) {
      case 'info':
          // here I want to fetch data
          return <> 

            {!data && <Loader />}
            {data && data.map(d => {
              return <div>{d.something}</div> 
            })}

          </>
      case 'otherCase':
          // here I do some calculations for example
          const number = 1+1;
          return <> 

            {number}

          </>
      ...
    }
  }

  ...

  return <> {renderSwitch()} </>

}

The issue I have is that if I use regular axios call, then when the data come, they are not rendered. If I want to use hooks like useEffect , they can't be called inside a function. Is there a solution for that?

EDIT: Just some of the cases in switch statement have the data fetch funcfionality

Answer 1

You should probably handle data fetching in a separate function and use conditional rendering to display the data if they are present or not:

const sidePaneComponent = () => {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    switch (sidePane.type) {
      case 'info':
        const response = await axios.get('<your-url>');
        setData(response.data);
        break;
      ...
    }

    useEffect(() => {
        fetchData();
    }, [sidePane])

    return (
      <>
        {!data && <Loader />}
        {data &&
          data.map((d) => {
            return <div>{d.something}</div>;
          })}
      </>
    );
  };
};