How can I make an API call on clicking a button in React

Abdullahi 0
Viewed 71

I want to fetch data from a currency API when I click the Button component. I have placed the code to request data in a useEffect hook but when I attempt to place the useEffect in the handleClickOpen function, it returns an error. Should I leave out useEEffect? Where should I place the API call in the code below?

    import * as React from 'react';
import { useEffect } from "react"
import axios from "axios"
import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import DialogTitle from '@mui/material/DialogTitle';
import Dialog from '@mui/material/Dialog';
import { blue } from '@mui/material/colors';


const emails = [
  {title: "Pound sterling", symbol: "£", id: 1, acronym: "GBP"},
  {title: "Euro", symbol: "€", id: 2, acronym: "EUR"},
  {title: "Nigerian Naira", symbol: "₦", id: 3, acronym: "NGN"},
  {title: "Saudi Arabian riyal", symbol: "SR", id: 4, acronym: "SAR"},
  {title: "Indian rupee", symbol: "₹", id: 5, acronym: "INR"},
  {title: "United States dollar", symbol: "$", id: 6, acronym: "USD"},

]
function SimpleDialog(props) {
  const { onClose, selectedValue, open } = props;

  const handleClose = () => {
    onClose(selectedValue);
  };

  const handleListItemClick = (value) => {
    onClose(value);

    
  };

  useEffect(() => {
    const options = {
      method: 'GET',
      url: 'https://exchangerate-api.p.rapidapi.com/rapid/latest/USD',
      headers: {
        'X-RapidAPI-Key': 'c0d2e70417msh3bde3b7dbe9e25ap12748ejsncd1fe394742c',
        'X-RapidAPI-Host': 'exchangerate-api.p.rapidapi.com'
      }
    };
    
    axios.request(options).then(function (response) {
      console.log(response.data);
    }).catch(function (error) {
      console.error(error);
    });

  },[])

  return (
    <Dialog onClose={handleClose} open={open}>
      <DialogTitle>Choose a currency</DialogTitle>
      <List sx={{ pt: 0 }}>
        {emails.map((email) => (
          <ListItem button onClick={() => handleListItemClick(email.symbol)} key={email.id}>
            <ListItemAvatar>
              <Avatar sx={{ bgcolor: blue[100], color: blue[600] }}>
                {email.symbol}
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={email.title} />
          </ListItem>
        ))}

      </List>
    </Dialog>
  );
}

SimpleDialog.propTypes = {
  onClose: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired,
  selectedValue: PropTypes.string.isRequired,
};

export default function SimpleDialogDemo({selectedValue, setSelectedValue}) {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (value) => {
    setOpen(false);
    setSelectedValue(value);
  };
 
  return (
    <div>
      
      <Button  variant="text" onClick={handleClickOpen} sx={{
         ml: 30,
         mb: 0,
         p: 0,
          }}>
        {selectedValue} {emails.find(email => email.symbol===selectedValue).acronym}
      </Button>
      <SimpleDialog
        selectedValue={selectedValue}
        open={open}
        onClose={handleClose}
      />
    </div>
  );
}
axios react-hooks rest asynchronous reactjs
3 Answers

Just move the API call to a separate function, say getAPIData or makeAPICall. Either use a normal function or use useCallback to avoid multiple creations of the function. You can now call this function in useEffect on initial load as well as anywhere else you want to make the same API call.

use a state variable to store the data obtained from the API call and use this variable to render the JSX Element.

const makeAPICall = () => {
    //api call and response
    //store response in a state variable
}

useEffect(()=>{ 
    makeAPICall();
}, [])

const handleClickEvent = () => {
    makeAPICall();
}
Aditya Arakal0

First thing is react does not recomment or allow using of hooks like useEffect in other functions, thats why you are getting error. Now since you need your data on click, place the fetch code you have written in useEffect in ClickHandler ( you donot need useEffect for the scenario defined above ).

const handleListItemClick = () => {
 const options = {
      method: 'GET',
      url: 'https://exchangerate-api.p.rapidapi.com/rapid/latest/USD',
      headers: {
        'X-RapidAPI-Key': 'c0d2e70417msh3bde3b7dbe9e25ap12748ejsncd1fe394742c',
        'X-RapidAPI-Host': 'exchangerate-api.p.rapidapi.com'
      }
    };
    
    axios.request(options).then(function (response) {
      console.log(response.data);
    }).catch(function (error) {
      console.error(error);
    });
}

And if you want to make use of this data fetched, add it in a state variable and use it. :)

Asad Ashraf0

I recommending you using reducer for handling such action, so when you click a button it will dispatch a state to do API fetch in reducer and dispatch a state when page load inside useEffect.

Stelf0
Related