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,707 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,235 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,800 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,465 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
22,048 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,729 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,601 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
42,322 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,609 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