Please help me with this
I just learn about ReactJs and now I learn about get data from Api, before that i use fetch to get api and it normal but when i use Axios and have that problem
import React, { Component } from 'react';
import './App.css';
import Axios from 'axios'
class App extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
Axios({
method: "GET",
url: "https://reqres.in/api/users"
}).then(res => {
this.setState({
isLoaded: true,
items: res.data
})
console.log(res.data)
}).catch(err => {
console.log(err)
})
}
render() {
const { error, isLoaded, items = [] } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<div>
{items.map(function (item, i) {
return <div key={i}>
<p>{item.id}</p>
<img src={item.avatar} alt="Card" />
</div>
})}
</div>
);
}
}
}
export default App;
This is data from reqres
{"page":1,"per_page":3,"total":12,"total_pages":4,"data":
[ {"id":1,"first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"},
{"id":2,"first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},
{"id":3,"first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"}
]}
Here is error from react
Error from react
I just want to show my data :(
Looking at the API response the statement should be
items: res.data.data
looks like res.data is not something you can loop over it. try to check what's inside it
edit:
as you can see from you output:
{"page":1,"per_page":3,"total":12,"total_pages":4,"data":
[ {"id":1,"first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"},
{"id":2,"first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},
{"id":3,"first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"}
]}
your informations are inside the data property, so, just loop over it:
{items.data.map(function (item, i) {
return <div key={i}>
<p>{item.id}</p>
<img src={item.avatar} alt="Card" />
</div>
})}
Related
Api url: https://dev.dashmed.in/sample-data
my code for fetching api and rendering in a table:
import React, { Component } from 'react'
import axios from 'axios'
export default class javascriptMap extends Component {
constructor(props){
super(props)
this.state = {
data: []
}
}
getData(){
axios.get('https://dev.dashmed.in/sample-data').then(res => {
var data = res.data
this.setState({data : data})
})
}
componentDidMount(){
this.getData()
}
render() {
return (
<>
<ul>
{this.state.data.map(d => (<li key={d.medName}>{d.saltName}</li>))}
</ul>
</>
)
}
}
Please point out where the error is being committed.
Because your res.data contains {status: true, data: Array(5000)}. You need to set res.data.data into state.
getData(){
axios.get('https://dev.dashmed.in/sample-data').then(res => {
const data = res.data.data
this.setState({data : data})
})
}
I am trying to fetch all the posts data from the admin site to show on my frontend but for now it is only print first value instead of all the data's.
I want solution on this, here is my code below.
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import { Stack } from './common/contentstack-api/api.js';
export default class App extends Component{
constructor() {
super()
this.state = { loading : true, result: null}
}
componentDidMount () {
var Query = Stack.ContentType("posts").Query()
.toJSON()
.find()
.then((result) => {
console.log(result);
this.setState({loading : false, result:result})
})
.catch((error) => {
console.log(error)
})
}
renderList (result) {
return (
<main>
<div className="media-body ">
{
this.state.result.map((value, index) => {
return (
<div className="article-metadata">
<ul>
<li>{ value[index].title}</li>
</ul>
</div>
)
})
}
</div>
</main>
)
}
render () {
const {loading, result} = this.state
return (this.state.loading) ? <h1>loading...</h1> : this.renderList(result[0])
}
}
[enter link description here][1]I am fetching API in react. I am able to see data in console but it is not appearing in JSX. I want to see Data id, name and value. But it is not appearing in browser.
[1]: https://codesandbox.io/s/late-thunder-456qp?file=/src/App.js
import React from 'react';
import axios from 'axios'
import './App.css';
class Main extends React.Component {
constructor(props) {
super(props)
this.state = {
users: [],
error: ''
}
}
componentDidMount(){
axios.get('https://jsonplaceholder.typicode.com/users')
.then( response => {
console.log(response);
this.setState({users: response.data})
})
.catch(error =>{
console.log(error);
})
}
render() {
const { users } = this.state
return (
<div>
<h2> Main Page</h2>
<p class="para-text"> Data from API</p>
{
users.length ?
users.map(post => <div key ={ users.id }> { users.name} </div>) : null
}
</div>
);
}
}
export default Main;
when mapping you named the key to your map as post and therefore when displaying them in jsx you must refer to that key
attached is a forked version of your sandbox https://codesandbox.io/s/late-thunder-456qp?file=/src/App.js
import "./styles.css";
import React from "react";
import axios from "axios";
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
users: [],
error: ""
};
}
componentDidMount() {
axios
.get("https://jsonplaceholder.typicode.com/users")
.then((response) => {
this.setState({ users: response.data });
})
.catch((error) => {
console.log(error);
});
}
render() {
const { users } = this.state;
return (
<div>
<h2> Main Page</h2>
<p class="para-text"> Data from API</p>
{users.length > 0
? users.map((post) => <div key={post.id}> {post.name} </div>)
: null}
</div>
);
}
}
export default Main;
I'm making an API call with React and the Facebook Graph API
The API is working fine but the map method is showing
this.state.data.map is not a function
import React, { Component } from 'react';
import axios from 'axios';
class user extends Component {
constructor(props){
super(props);
this.state={
data:[123]
}
}
componentDidMount() {
axios.get("facebook url")
.then(response => {
if (response.status === 200 && response != null) {
this.setState({
data: response.data
});
} else {
console.log('problem');
}
})
.catch(error => {
console.log(error);
});
}
render(){
return (
<div>
{this.state.data.map((item,index) => {
return (
<div key={item.id}>
<h1>{item.message}</h1>
</div>
);
})}
</div>
);
}
}
export default user;
So I want to call an API with react and my data is not showing up correctly I know I did it right but is there anything I am missing because I don't know why it is still showing Loading
import React from 'react';
import './App.css';
class App extends React.Component {
constructor (props) {
super(props);
this.state = {
students: [],
isLoaded: false,
error: null,
}
}
componentDidMount() {
fetch("http://localhost:3200/students")
.then(res => res.json())
.then((myresult) => {
this.setState({
isLoaded: true,
students: myresult.students,
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const {error, isLoaded, students} = this.state;
if (error) {
return <div>Error: {error.message}</div>
} else if (isLoaded) {
return <div> Loading ...</div>
} else {
return (
<ul>
{students && students.map(student => (
<li key={student._id}>
{student._id} {student.role_num}
</li>
))}
</ul>
);
}
}
}
export default App;
I am trying to display information from this URL http://localhost:3200/students
I was following this link on how to call an API https://reactjs.org/docs/faq-ajax.html
hey guys updated my code I am still getting the same issue stuck on loading I don't know whether I am passing in my data properly
I think there a couple of things going on here but main points are
its componentDidMount not MountComponent
your not setting students correctly in state
In you code above for MountComponent see that you are setting up movieItems and your state is expecting students. To solve the issue use the code below.
MountComponent = () => {
fetch("http://localhost:3200/students")
.then(res => res.json())
.then((myresult) => {
this.setState({
isLoaded: true,
students: myresult.students,
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
change this:
} else if (!isLoaded) {
to:
} else if (isLoaded) {
Write this in your function and check
componentDidMount() {
fetch("http://localhost:3200/students").then(res => {
this.setState({ students : res.data })
})
}