useState([]) dosen't work when I update an array

Question

I have a problem. The variable interests is filled up but interestsInput not. What exactly is the problem here? I want to show the interests of a person in a textfield, but it doesnt show the input in the array.

const[firstLoad, setFirstLoad] = useState(true);
const [interestsInput, setInterests] = useState([]);

    const selectedTags = (tags) => {
        setTags(tags)
    };

    useEffect(() => {
        if(firstLoad) {
            getInterests();
            
        }
           
        }, [interestsInput]);
 
    const getInterests = () => {
        axios
        .get("http://localhost:4000/interests",
        { }
        )
        .then((res) => {
            if (res.status === 200) {
                var interests = [];
                for (var i = 0; i < firstInterest.length; i++) {
                    //console.log(myStringArray[i]);
                    //console.log(firstInterest[i]['text'])
                    //console.log(firstInterest[i])
                    interests[i] = firstInterest[i]['text'];
                    setInterests([...interestsInput, interests[i]])
                }
                console.log(interests);
                //setInterests([]);
                //setInterests([...interests]);
                console.log(interestsInput)
            }
        })
        .catch((error) => {
            console.log(error);
        });
    }

Answer 1

Set the new interests outside of the loop, not inside it.

To make things concise, use .map to turn the array of objects into an array of texts.

const getInterests = () => {
    axios
        .get("http://localhost:4000/interests",
            {}
        )
        .then((res) => {
            if (res.status === 200) {
                setInterests([...interestsInput, ...firstInterest.map(int => int.text)]);
            } else {
                throw new Error(res);
            }
        })
        .catch((error) => {
            console.log(error);
        });
};

Answer 2

Also like user CertainPerformance suggested, you'll need to setState outisde the loop.

// this is redundant, you can achieve this by useEffect with empty array
// const[firstLoad, setFirstLoad] = useState(true);
const [interestsInput, setInterests] = useState([]);

const selectedTags = (tags) => {
  setTags(tags)
};

const getInterests = () => {
  axios
  .get("http://localhost:4000/interests")
  .then((res) => {
    if (res.status === 200) {
      var interests = [];
      for (var i = 0; i < firstInterest.length; i++) {
        interests[i] = firstInterest[i]['text'];
        setInterests([...interestsInput, interests[i]])
      }
    }
  })
  .catch((error) => {
    console.log(error);
  });
}

// Ideally you'd want to put use effects after you have defined your constants & handlers

useEffect(() => {
  // no need of firstLoad condition
  getInterests();
}, []); // this will only run once after first render