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])
}
}
Related
I would like to get data from a json using an url with reactJS but it does not work.
The url where I want to get data is the following : url
Here is my code :
import React from "react";
import { render } from "react-dom";
import axios from "axios";
class App extends React.Component {
constructor() {
super();
this.state = { member: [] };
}
memberList(list) {
const memberList = list.map((member, index) => {
return (
<li>
{member.name} {member.age}
</li>
);
});
return <ul>{memberList}</ul>;
}
render() {
console.log(this.state.member);
return (
<div>
<button onClick={this.getJson}>Get json</button>
{this.memberList(this.state.member)}
</div>
);
}
getJson = () => {
const url =
"https://soundcloud.com/oembed?url=http%3A//soundcloud.com/forss/flickermood&format=json";
axios.get(url).then((res) => {
// console.log(res.data);
this.setState(res.data);
});
};
}
render(<App />, document.getElementById("root"));
and the project is there : my project
Thank you for your help !
[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;
hey i am new in the field and want to display the state using the map and i am not able to do so
and there is no problem in the api call through axios so ignore it
my code is
import React, { Component } from 'react';
import axios from 'axios';
const url ='https://www.reddit.com/r/space.json';
class Apicall extends Component {
state={
posts:[],
subr:'space'
};
componentDidMount(){
this.getReddit();
}
getReddit=async()=>{
console.log('getredddit called sir ');
try {
let response=await axios.get(`https://www.reddit.com/r/${this.state.subr}.json`);
let posts=response.data.data.children.map(obj=>obj.data)
this.setState({posts:posts},()=>{console.log(this.state.posts);
})
} catch (error) {console.log(error);}}
render() {
let controlItems=this.state.posts.map(post=>{<h1 id={post.id}>{post.title}</h1>});
return (
<div>
<h1>{`/r/${this.state.subr}`} </h1>
{controlItems}
</div>);
}
}
export default Apicall;
You were iterating wrong on your data. response.data.data.children should be replaced with response.data.children. Implicit return of et controlItems=this.state.posts.map(post=>{{post.title}}); is also wrong.
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<Apicall />
</div>
);
}
class Apicall extends React.Component {
state = {
posts: [],
subr: "space"
};
componentDidMount() {
this.getReddit();
}
getReddit = async () => {
console.log("getredddit called sir ");
try {
let response = await fetch(
`https://www.reddit.com/r/${this.state.subr}.json`
);
response = await response.json();
console.log(response);
let posts = response.data.children.map(obj => obj.data);
this.setState({ posts: posts }, () => {
console.log(this.state.posts);
});
} catch (error) {
console.log(error);
}
};
render() {
let controlItems = this.state.posts.map(post => (
<h1 id={post.id}>{post.title}</h1>
));
return (
<div>
<h1>{`/r/${this.state.subr}`} </h1>
{controlItems}
</div>
);
}
}
I need help to display the data from the API.
When i try to get the data with map i get an error. TypeError: userdata.map is not a function
import React from "react";
import axios from "axios";
export class HighscoreList extends React.Component {
constructor(props) {
super(props);
this.state = {
users: ""
};
}
componentDidMount() {
axios
.get("https://schnitzeljagdar.herokuapp.com/users/getAllUser")
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<React.Fragment>
<h2>User</h2>
{this.state.users}
</React.Fragment>
);
}
}
Try this https://codesandbox.io/s/wonderful-cherry-63ee9
export default class HighscoreList extends React.Component {
state = {
users: []
};
componentDidMount() {
axios
.get("https://schnitzeljagdar.herokuapp.com/users/getAllUser")
.then(res => this.setState({users:[res.data]}))
.catch(error => {
console.log(error);
});
}
render() {
const {users} = this.state;
let array = users[0]?Object.values(users[0]):[];
console.log(array)
return (
<React.Fragment>
{array.map((arr,index)=>
<div key={index}>
<h2>{arr.username}</h2>
<p>{arr.email}</p>
</div>
)}
</React.Fragment>
);
}
}
I am Facing the problem like TypeError: this.state.monsters.map is not a function.I Have given this.state ={monsters:[]} After giving the state like above still i am facing that map is not a function....
import React, { Component } from 'react'
import './App.css';
class App extends Component {
constructor (){
super ()
this.state = {
monsters : []
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json)
.then(users => this.setState({monsters : users}))
}
render() {
return (
<div className="App">
{this.state.monsters.map(monster =>(
<h1 key={monster.id} > {monster.name} </h1>
))}
</div>
);
}
}
export default App;
Inovke response.json
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json()) // added parentheses
.then(monsters => this.setState({ monsters }))
}