make-the-api-call-in-componentdidmount.md

id	sidebar_label	title	description	keywords	version	image
make-the-api-call-in-componentdidmount	Make the API call	Make the API Call in componentDidMount()	Make the API call in componentDidMount(), techniques, tips and tricks in development for React developers.	make the api call in componentDidMount() reactpatterns react patterns reactjspatterns reactjs patterns react reactjs react techniques react tips and tricks	Make the API call in componentDidMount()	/img/reactpatterns-cover.png

You should populate data with AJAX calls in the componentDidMount lifecycle method. So you can use setState to update your component when the data is retrieved.

For example using Class:

function componentDidMount() {
  fetch('api/sms')
    .then(result => {
      const sms = result.data
      console.log('COMPONENT WILL Mount messages : ', sms)
      this.setState({sms: [...sms.content]})
    })
}

For example using Hook:

useEffect(() => {
  fetch('api/sms')
    .then(result => {
      const sms = result.data
      console.log('COMPONENT WILL Mount messages : ', sms)
      this.setState({sms: [...sms.content]})
    })
}, [])