How to correctly assign axios response to react function component state

user_13576263 0
Viewed 11514

I have problem as in title. My code give me an infinite loop - the console log is looping all time.

I just want to assign axios response to component state nad render elements via .map()

component:

const Translator = () => {
    const [languages, setLanguages] = useState([]);
    getLanguages().then(data => {
       setLanguages(data.languages)
    });
    
    console.log(languages);
  
  return (
    <header className="translator__header">
        {languages.map( lang => {
            <h1>{lang.language}</h1>
        })}
    </header>
  );
};

resource:

export default () => {
    return Axios.get(`${config.baseURL}/languages`, {headers: config.headers}).then(res => {
        return res.data.data;
    });
}

request give array with object like this

{language: "af"}
react-functional-component axios reactjs
3 Answers

Make the axios request inside the useEffect hook, in order to run once the component is mounted.

import { useEffect } from 'react';

const Translator = () => {
    const [languages, setLanguages] = useState([]);
    useEffect(() => {
      getLanguages().then(data => {
         setLanguages(data.languages)
      });

      console.log(languages);
    }, []);
    
  
  return (
    <header className="translator__header">
        {
          languages.length > 0 && (
            languages.map( lang => <h1>{lang.language}</h1>)
          )
        }
    </header>
  );
};

user_24435090

It's giving you the infinite loop, because you're changing state on each render. Put this code in useEffect hook

getLanguages().then(data => {
   setLanguages(data.languages)
});
user_139299890

Try to use the useEffect hook. Passing [] as the second argument is closer to the familiar componentDidMount and componentWillUnmount mental model.

In React, when you use lists, each list item needs a unique key.

const Translator = () => {
    const [languages, setLanguages] = useState([]);

    useEffect(() => {
        getLanguages().then(data => {
           setLanguages(data.languages)
        });
    }, []);

    console.log(languages);
  
    return (
        <header className="translator__header">
            {languages.map(lang => {
                <h1 key={lang.language}>
                    {lang.language}
                </h1>
            })}
        </header>
    );
};
user_72256340
Related