How to call API inside switch case - reactjs

Question

I have created a tab component where I have three tabs each tab will contain data from different end points. I have planned to hit API's using switch case since I am having different end points. I have created a onChange function where I used to call three different end points, unfortunately I couldn't able to achieve the result, I am getting error stating that useEffect cannot be used inside onChange. Could anyone guide me to achieve the result. Thanks in advance.
API'S I am using are :https://reqres.in/api/users?page=1, https://reqres.in/api/users?page=2, https://reqres.in/api/users?page=3
import React, { useState, useEffect } from "react";
import Paper from "#material-ui/core/Paper";
import Tab from "#material-ui/core/Tab";
import Tabs from "#material-ui/core/Tabs";
const Tabb = () => {
const [profileData, setProfileData] = useState(0);
useEffect(() => {
fetch("https://reqres.in/api/users?page=1")
.then((results) => results.json())
.then((data) => {
console.log("data", data);
});
});
const handleChange = (e, value) => {
switch (value) {
case 0:
break;
case 1:
break;
case 2:
break;
default:
break;
}
setProfileData(value);
};
return (
<div style={{ marginLeft: "40%" }}>
<h2>Tbas in React JS</h2>
<Paper square>
<Tabs
value={profileData}
textColor="primary"
indicatorColor="primary"
onChange={handleChange}
>
<Tab label="Tab One" />
<Tab label="Tab Two" />
<Tab label="Tab Three" />
</Tabs>
{/* <h3>Tab NO: {value} clicked!</h3> */}
</Paper>
</div>
);
};

Answer 1

You have a single API with a changing page parameter. Whenever you set the page (tab changed), update the state with the number of the page.
Set the page as the useEffect() dependency, so an API call would be issued whenever the page changes. Add the current page to the base query url to the current url.
Demo - choose a tab in the select menu:
const { useState, useEffect } = React;
const Paper = 'div';
const Tabs = 'select';
const Tab = ({ label, ...rest }) => (<option {...rest}>{label}</option>);
const Demo = () => {
const [page, setPage] = useState(0);
useEffect(() => {
const url = `https://reqres.in/api/users?page=${page}`;
fetch(url)
.then((results) => results.json())
.then((data) => {
console.log("data", data);
});
}, [page]);
const handleChange = e => {
setPage(+e.target.value);
};
return (
<Paper>
<Tabs onChange={handleChange}>
<Tab label="Tab One" value={1} />
<Tab label="Tab Two" value={2} />
<Tab label="Tab Three" value={3} />
</Tabs>
{/* <h3>Tab NO: {value} clicked!</h3> */}
</Paper>
);
};
ReactDOM.render(
<Demo />,
root
);
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

If I understand your question/issue you want to conditionally fetch some data and update state via a switch statement.
Issues
The useEffect without a dependency will be called every render cycle. This is likely not what you want.
You can't conditionally call hooks in loops and callbacks, they must only be called from react functions and other custom hooks.
Solution
I don't think you need the useEffect hook at all, you can define a function to handle the fetch, or better, just use a single fetch in the onClick handler.
const handleChange = (e, value) => {
let url;
switch (value) {
case 0:
default:
url = "https://reqres.in/api/users?page=1";
break;
case 1:
url = "https://reqres.in/api/users?page=2";
break;
case 2:
url = "https://reqres.in/api/users?page=3";
break;
}
fetch(url)
.then((results) => results.json())
.then((data) => {
console.log("data", data);
});
setProfileData(value);
};
You can simplify this a bit more, the switch cases are basically just adding 1 to the value and forming the url. Just use a string template to form the request URL.
const handleChange = (e, value) => {
fetch(`https://reqres.in/api/users?page=${value + 1}`)
.then((results) => results.json())
.then((data) => {
console.log("data", data);
});
setProfileData(value);
};