reactjs - react ajax request using axios -
i'm using axios make ajax request. i'm newbie making ajax request , not understanding why code isn't working? have deleted code has nothing question on why not working. error showing "get https://api.github.com/users/$%7bthis.state.usersname%7d 404 (not found)". maybe i'm writing request wrong in url part...
import react 'react'; import reactdom 'react-dom'; import './index.css'; import app './app'; import registerserviceworker './registerserviceworker'; import axios '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') );
you trying use template literal using wrong qoute template literal
or can concatenate string:
template literal: `http://api.github.com/users/${this.state.username}
or contatenate string 'http://api.github.com/users/' + this.state.username'
and don't see import or declare card component, yes observation
Comments
Post a Comment