Dropdown strugs

[tylly]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

My getAllDevelopers query enters an infinite loop

Post any code you think might be relevant (one fenced block per file)

import React from "react";
import { useState, useLocation } from "react";
import { Dropdown, DropdownButton, Form } from "react-bootstrap";
import { getAllDevelopers } from "../../api/developers";
import "../../style.css";
export default function Devs() {
  const [developersItems, setDevelopersItems] = useState([]);

  getAllDevelopers()
    .then((res) => {
      setDevelopersItems(res.data.developers);
      console.log(developersItems);
    })
    .catch((err) => {
      console.log(err);
    });
  const developerDropDownItems = developersItems.map((item) => (
    <Dropdown.Item eventKey={item._id}>{item._id}</Dropdown.Item>
  ));

  return <>{developerDropDownItems}</>;
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

infinite console logs

What is your best guess as to the source of the problem?

possibly triggering a useEffect somewhere but I check all the dependency arrays and it doesnt look like i should be touching any of those

What things have you already tried to solve the problem?

restructuring map method, renaming variables

Paste a link to your repository here https://github.com/tylly/project-4-react

[kestler01]

in your posted code block you aren't using a use effect with said dependency array : definitely could be the source of this issue is it the complete block ?

[tylly]

that is the whole block, so no i am not using a useEffect in this component. my concern is that i was maybe triggering a useEffect elsewhere. do you think i need to add one to this component?

[kestler01]

yes, we specifically want to use useEffect with a empty array as the dependency array so that the code only runs onMount, instead of every render like it currently is

[tylly]

got it! Thank you. solved like this:

import React from "react";
import { useState, useLocation, useEffect } from "react";
import { Dropdown, DropdownButton, Form } from "react-bootstrap";
import { getAllDevelopers } from "../../api/developers";
import "../../style.css";
export default function Devs() {
  const [value, setValue] = useState("React");
  const [tags, setTags] = useState([]);
  const [developersItems, setDevelopersItems] = useState([]);
useEffect(() => {
  getAllDevelopers()
    .then((res) => {
      setDevelopersItems(res.data.developers);
      console.log(developersItems);
    })
    .catch((err) => {
      console.log(err);
    });
}, [])
  const developerDropDownItems = developersItems.map((item) => (
    <Dropdown.Item eventKey={item._id}>{item.name}</Dropdown.Item>
  ));

  return <>{developerDropDownItems}</>;
}