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
2,632 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,880 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,880 points
2,207 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,880 points
1,749 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,880 points
24,309 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,880 points
21,750 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,880 points
2,647 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,880 points
2,504 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,880 points
41,363 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,880 points
8,461 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