Error XMLHttpRequest GET not working in React js

0 votes

I have a Profile class, like this :

 class Profile extends React.Component {
    state = {
        email: '',
        userName: '',
        userID: ''
    };

    getData() {
        var request = new XMLHttpRequest();

        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);
            }
        };
        request.open('GET', 'http://localhost:8080/user/1');
        request.send();
        console.log(request.responseText);
    }

    render() {
        return ( <
            div >
            this.getData(); <
            /div>

        );
    }
}

The problem is it is not putting anything in the console.

Although http://localhost:8080/user/1 in browser returning me this :

{"userID":1,"passwordHash":"5994471abb01112afcc18159f6cc74b4f511b99806da59b3caf5a9c173cacfc5","email":"admin@admin.com"}

How to resolve this?

Jun 4, 2020 in Angular by kartik
• 37,510 points
1,817 views

1 answer to this question.

0 votes

Hello @kartik,

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

Example from react documentation

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      userName: '',
      userID: '',
      error: null,
      isLoaded: false
    };
  }

  componentDidMount() {

 fetch("http://localhost:8080/user/1")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            email: result.email,
            userName: result.userName,
            userID: result.userID
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, email, userName, userID  } = this.state;
    return (
        <ul>
          {email}
          {userName}
          {userID}
        </ul>
    );
  }
}

Hope this work!

If you need to know more about React, Its recommended to join React JS course today.

Thank You!!

answered Jun 4, 2020 by Niroj
• 82,800 points

Related Questions In Angular

0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,800 points
1,835 views
0 votes
1 answer

Error:Unable to access React instance (this) inside event handler

Hello @kartik, You can use an arrow function together with ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,800 points
1,226 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,800 points
19,865 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,800 points
16,321 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,800 points
1,874 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,800 points
1,563 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,800 points
22,907 views
0 votes
1 answer

Error:getting “ENOTEMPTY: directory not empty, rmdir …” error on installing express in angular CLI app.

Hello Kartik, Use this command : npm install ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,800 points
5,945 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP