GET request in React.js to a server

Question

I have a SearchBar and a Profile component and I want to make a GET request to the server: http://awesomeserver/users. The data in the server are in an array of objects. I want to be able to type in a username in the search bar and when I click "Search", I want to display that user's first name, last name, and email on the page. For example, when I search for jsmith, I want to display: First Name: John, Last Name: Smith, email: [email protected]. In order to do that, I need to pass them as props to the Profile component. I am using axios to make the request, but I think I am not using it correctly. How do I search by username, but only retrieve the first name, last name, and email?

This is what a sample data would look like in the server:

{
  username: jsmith,
  firstName: John,
  lastName: Smith,
  email: [email protected],
  hobby: hiking,
  id: 1
}

This is my code so far:

//Profile Component

import React, { Component } from 'react';


class Profile extends Component {
  render() {
    return (
        <div>
            <div>First Name: {this.props.firstName}</div>
            <div>Last Name: {this.props.lastName}</div>
            <div>Email: {this.props.email}</div>
        </div>
    );
  }
}

export default Profile;



//SearchBar component

import React, { Component } from 'react';
import axios from 'axios';

import Profile from './Profile';

class SearchBar extends Component {

  constructor(props) {
  super(props);
  this.state = {
    fetchUser: {
      username: '',
      firstName: '',
      lastName: '',
      email: '',
      hobby: ''
    }
  }
  this.fetchUser = this.fetchUser.bind(this);
}


 fetchUser() {
    var id = this.refs.id.value;

    axios.get('http://awesomeserver/users/${id}')
      .then(resp => resp.json()) 
      .then( (response) => {
        console.log(response);
        this.setState({
          fetchUser: response.data
        });
      })
      .catch( (error) => {
        console.log(error);
      });  
  }

  render() {
    return (
      <div>
          <input ref="id" placeholder="Enter in a username" />
          <button onClick={this.fetchUser}>Search</button>
          <Profile firstName={this.fetchUser.firstName} lastName={this.fetchUser.lastName} email={this.fetchUser.email} />
      </div>
    );
  }
}

export default SearchBar;

Answer 1

The way you use axios is incorrect here, we need to set the returned value to props correctly, and we also need to bind the axios callback function properly, for example, your code should look like:

import React, { Component } from 'react';


class Profile extends Component {
  render() {
    return (
        <div>
            <div>First Name: {this.props.firstName}</div>
            <div>Last Name: {this.props.lastName}</div>
            <div>Email: {this.props.email}</div>
        </div>
    );
  }
}

export default Profile;



//SearchBar component

import React, { Component } from 'react';
import axios from 'axios';

import Profile from './Profile';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fetchUser: {
        username: '',
        firstName: '',
        lastName: '',
        email: '',
        hobby: ''
      }
    }
    this.fetchUser = this.fetchUser.bind(this);
  }

  fetchUser() {
    axios.get('http://awesomeserver/users.username')
      .then( (response) => {
        console.log("response", response);
        this.setState({
          fetchUser: response.data
        });
        console.log("fetchUser", this.state.fetchUser);
      })
      .catch( (error) => {
        console.log(error);
      });  
  }

  render() {
    return (
      <div>
          <input placeholder="Enter in a username" />
          <button onClick={this.fetchUser}>Search</button>
          <Profile firstName={this.state.fetchUser.firstName} lastName={this.state.fetchUser.lastName} email={this.state.fetchUser.email} />
      </div>
    );
  }
}

export default SearchBar;  

Please also check the response in the console, to make sure you have got the correct object. Please post here some errors from the console if any, thanks!