CODEWITHSUNDEEP
javascriptarraysreactjs
Kazim
Kazim

Reputation: 175

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

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);
        });
    }

Upvotes: 0

Views: 59

Answers (2)

Kumar
Kumar

Reputation: 3126

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

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370759

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);
        });
};

Upvotes: 1

Related Questions