Pass dropdown value from function to React.useEffect() on selection

Question

Goal: I am trying to change the link inside the fetch() function with the value that comes from the dropdown.

Attempts:

1) I attempted passing the value to the function like GetAPILinks(Link_from_dropdown) and calling it in the onSelect function however I am getting an error stating: Invalid hook call. Hooks can only be called inside of the body of a function component

2) I have also tried other methods of passing it by storing it in a variable inside GetAPILinks but resulted in errors.

I am starting to believe I am approaching this all wrong. Any advice or help would be great!

My Code:

This code will fetch the data from a hard coded link and renders a dropdown button that prints the selected values to the console.

import React from 'react';
import { DropdownButton, Dropdown} from 'react-bootstrap';

const GetAPILinks = () => {
  const [apiData, setApiData] = React.useState([]);
  React.useEffect(() => {
    fetch('https://Random_API/Link_From_Dropdown_Goes_Here')
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setApiData(data);
      });
  }, []);

  return (
    <DropdownButton id="dropdown-item-button" title="API Links" onSelect={function(evt){console.log(evt)}}>
        <Dropdown.Item as="button" eventKey='API_Link1'>Link 1</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link2'>Link 2</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link3'>Link 3</Dropdown.Item>
    </DropdownButton>          
  );
}

export default GetAPILinks;

Andrew Craswell · Accepted Answer · 2020-04-15 23:39:18Z

You're pretty close here. You should track another state value for the fetch Url. Tracking it in a local variable, or calling the function directly won't trigger your component to render when the values change.

const [fetchUrl, setFetchUrl] = useState(initialValue);

in your onSelect drop down you can set the value of the fetchUrl using the setFetchUrl function that the useState hook provides.

Now all that is left is to tell your useEffect hook that it needs to execute whenever the fetchUrl state value changes. You should add fetchUrl to the deps array.

It might look something like this:

const GetAPILinks = () => {
  const [apiData, setApiData] = React.useState([]);
  const [fetchUrl, setFetchUrl] = React.useState('');
  React.useEffect(() => {
    if (fetchUrl) {
      fetch(fetchUrl)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          setApiData(data);
        });
    }
  }, [fetchUrl]);

  return (
    <DropdownButton id="dropdown-item-button" title="API Links" onSelect={(e)=>{setFetchUrl(e.target.eventKey)}}>
        <Dropdown.Item as="button" eventKey='API_Link1'>Link 1</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link2'>Link 2</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link3'>Link 3</Dropdown.Item>
    </DropdownButton>          
  );
}

Hagai Harari · Accepted Answer · 2020-04-15 22:15:39Z

0

const GetAPILinks = () => {

const [apiData, setApiData] = React.useState([]);
const [url, setUrl] = React.useState(null);
React.useEffect(() => {
 if (url) {
  fetch('https://${url}`)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    setApiData(data);
  }});
}, [url]);

return (
<DropdownButton id="dropdown-item-button" title="API Links" 
    onSelect={evt=>setUrl(evt.key)}>
    <Dropdown.Item as="button" eventKey='API_Link1'>Link 
        1
    </Dropdown.Item>
  </DropdownButton>          
 );
}

 export default GetAPILinks;

answered Apr 15, 2020 at 22:15

Hagai Harari

2,8673 gold badges14 silver badges27 bronze badges

Comments

ESI · Accepted Answer · 2020-04-15 22:16:03Z

You should create another state for current link and add it to useEffect dependencies.

It should be something like that, I didn't test.

import React from 'react';
import { DropdownButton, Dropdown} from 'react-bootstrap';

const GetAPILinks = () => {
  const [apiData, setApiData] = React.useState([]);
  const [currentLink, setCurrentLink] = React.useState('');

  React.useEffect(() => {
    fetch(`https://Random_API/${currentLink}`)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setApiData(data);
      });
  }, [currentLink]);

  return (
    <DropdownButton id="dropdown-item-button" title="API Links" onSelect={(e)=>{setCurrentLink(e.target.eventKey)}}>
        <Dropdown.Item as="button" eventKey='API_Link1'>Link 1</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link2'>Link 2</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link3'>Link 3</Dropdown.Item>
    </DropdownButton>          
  );
}

export default GetAPILinks;

Hope it helps.

Drew Reese · Accepted Answer · 2020-04-15 22:16:20Z

Add another piece of state to track the selected dropdown value

const [query, setQuery] = useState();

And add query to the dependency array of the effect and only make the fetch request when query is truthy

React.useEffect(() => {
  query && fetch(`https://Random_API/${query}`)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      setApiData(data);
    });
}, [query]);

A cleaner solution may be to factor out the fetch logic to its own function, call that with the callback, and store only the result in state

const GetAPILinks = () => {
  const [apiData, setApiData] = useState([]);

  const fetchData = query => fetch(`https://Random_API/${query}`)
    .then((response) => {
      return response.json();
    })
    .then(setApiData(data));

  return (
    <DropdownButton id="dropdown-item-button" title="API Links" onSelect={fetchData}>
        <Dropdown.Item as="button" eventKey='API_Link1'>Link 1</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link2'>Link 2</Dropdown.Item>
        <Dropdown.Item as="button" eventKey='API_Link3'>Link 3</Dropdown.Item>
    </DropdownButton>          
  );
}

Collectives™ on Stack Overflow

Pass dropdown value from function to React.useEffect() on selection

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related