react ajax request using axios

Question

I'm using axios to make an ajax request. I'm a newbie to making ajax request and not understanding why this code isn't working? I have deleted some code that has nothing to do with this question on why its not working. The error is showing is "GET https://api.github.com/users/$%7Bthis.state.usersName%7D 404 (Not Found)". Maybe I'm writing the request wrong in the url part...

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import axios from 'axios';

const Card = (props) => {
    return(
        <div style={{margin: '1em'}}>
            <img src={props.Avatar_URL} width="120px"/>
            <div>
                <div>{props.Name}</div>
                <div>{props.Company}</div>
            </div>
        </div>
    );

};

const CardList= (props) => {
    return(
        <div>
            {props.Card.map( card => <Card {...card}/>)}
        </div>

    );
};

class MyForm extends React.Component{
    state = { userName: '' }
    handlesSubmit = (event) => {
        event.preventDefault();
        console.log('Event: Form Submitted:', this.state.userName);
        axios.get("api.github.com/users/" + this.state.userName ).then(response => {
            console.log(response);
        })

    };
    render(){
        return(
            <form onSubmit={this.handlesSubmit}>
                <div style={{margin: '1em'}}>
                    <input type="text" placeholder="@Github"
                                value={this.state.userName}
                                onChange={(event) => this.setState({ userName: event.target.value})}/>
                    <button type="submit">Search</button>
                </div>
            </form>
        );
    };
};

class MyApp extends React.Component{
    render(){
        return(
            <div>
                <MyForm />
                <CardList Card={data} />
            </div>
        );
    };
};

let data = [
    {
        Avatar_URL: "https://avatars2.githubusercontent.com/u/35?v=4",
        Name: "Kevin Williams",
        Company: "Oracle"
    },
    {
        Avatar_URL: "https://avatars2.githubusercontent.com/u/36?v=4",
        Name: "Dave Fayram",
        Company: "Udacity, Inc"
    }
]

ReactDOM.render(
    <MyApp />,
    document.getElementById('root')  
);

Answer 1

You are trying to use template literal but you are using the wrong qoute template literal

or you can concatenate the string:

template literal: `http://api.github.com/users/${this.state.userName}

or contatenate string 'http://api.github.com/users/' + this.state.userName'

And I don't see where you import or declare the Card component, yes a observation