I im new in react js i have only 25 days of experience of reactjs and i am trying to fetch the data from url of embedly but i can not understand how to use it i am using the url which is ( https://api.github.com/users/hadley/orgs ) it is fetch the data correctly but i want to fetch the data from the embed.ly this is my page in react name is PostListItems.js
can any body help me thanks in advance.
Type isn't a field that is returned from Github's API.
import React from 'react';
import { render } from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
fetch('https://api.github.com/users/hadley/orgs', {
method: 'GET',
})
.then((resp) => resp.json())
.then(data => {
this.setState({ data: data });
}).catch(error => {
console.log(error);
});
}
render() {
return <div>
{this.state.data.map((data, index) => {
return <div key={index}>{data.id}: {data.url}</div>
})}
</div>
}
}
render(<App />, document.getElementById('root'));
Related
I'm trying to display data from an Event using Laravel into a React Component. While testing with console.log or alert, the message displays correctly as I wish. But being the noob that I'm, I don't know how to display the new event's data like I'm displaying the table's data using axios in the example bellow.
Like displaying the infos IN the component rather than externally using alert or console.log. Tried return and it didn't work.
React component :
import React,{Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Echo from "laravel-echo";
class Patient extends React.Component {
constructor(props) {
super(props)
this.state = {
patients : []
};
}
componentDidMount() {
axios.get('api/patients')
.then(response => {this.setState({patients: response.data})})
.catch(err => console.log(err));
window.Echo.channel('home')
.listen('NewPatient', (data) => {
alert(JSON.stringify(data));
}, (e) => {
alert(data);})
}
render() {
return (
<div>
<ul>
{ this.state.patients.map(patient => <li>{patient.nom}</li>)}
</ul>
</div>
)
}
}
export default Patient;
I want to display the data of this event in an HTML list, so each time there is a new output the list updates itself.
window.Echo.channel('home')
.listen('NewPatient', (data) => {
alert(JSON.stringify(data));
}, (e) => {
alert(data);})
Try set state:
window.Echo.channel('home')
.listen('NewPatient', newPatientData => {
this.setState({
patients: this.state.patients.concat(newPatientData)
})
}, e => {
console.log("Error", e)
})
Hi I am working on a react app with Routing and HOC. I expect to see a page but i get page not found when i know the page is there.
in componentDidMount this.setState, data is shown as undefined but in the HOC wrapper i see the data arrive from the server.
Before I wrapped the page in HOC i could see it rendering content so I know the content exists.
Here is my Page component which is being called via a Route :
import React, { Component } from "react";
import WithBackend from "./WithBackend";
class Page extends Component {
constructor(props) {
super(props);
this.state = { model: null };
}
render() {
if (this.state.model != null) {
return (
<div className="container">
<div className="row">
<div className="col-md">
<h1>{this.state.model.title}</h1>
</div>
</div>
</div>
);
} else {
return (
<div>
<h2>Home</h2>
</div>
);
}
}
componentDidMount() {
const data = this.props.getPage("1");
console.log(data);
this.setState({
model: data,
});
}
}
export default WithBackend(Page);
Here is the HOC component WithBackend: I am not sure if i should be setting the state on this class on in the class that is being wrapped.
When i debug the code in the getPage method, in the setState part i see the data being populated from the backend server.
import React from "react";
import ContentService from "./ContentService";
const WithBackend = (WrappedComponent) => {
class HOC extends React.Component {
constructor() {
super();
this.contentService = new ContentService();
this.getPage = this.getPage.bind(this); // <-- Add this
}
getPage(id) {
this.contentService
.getPage(id)
.then((response) => response.json())
.then((data) => {
this.setState({ model: data });
})
.catch((e) => {
console.log(e);
});
}
render() {
return <WrappedComponent getPage={this.getPage} {...this.props} />;
}
}
return HOC;
};
export default WithBackend;
and here is the contentService which only returns a promise:
class ContentService {
pageUrl = process.env.REACT_APP_BASE_URL + "/pages/";
getPage(id) {
const path = this.pageUrl + id;
const fetchPromise = fetch(path, {
method: "GET",
});
return Promise.resolve(fetchPromise);
}
}
export default ContentService;
Could anyone please advice what i am doing wrong?
Thanks in advance.
getPage is an asynchronous method, that should return a promise:
getPage(id) {
return this.contentService
.getPage(id)
.then((response) => response.json())
.catch((e) => {
console.log(e);
});
}
And then
componentDidMount() {
this.props.getPage("1").then(model => this.setState({ model }));
}
How I handle the value array from Axios and fill the card
get the value from the array and show data
import React, { Component, Suspense } from "react";
import axios from "axios";
import {Card} from "reactstrap";
import { PHP } from "../../constants";
//api url adress server
const api = PHP;
const reqtoken = "Bearer " + localStorage.getItem("token");
class Property extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
load() {
axios
.get(api + "api/property", {
headers: {
"Content-type": "application/json",
Authorization: reqtoken
}
})
insert the data array on the state
.then(json => {
console.log show the data on console terminal
console.log(json.data.data.data);
this.setState({
data: json.data.data.data
});
})
.catch(erros => {
console.log(erros);
});
}
componentDidMount() {
this.load();
}
render() {
return (
<div>
map the array to handle the result................
{this.state.data.map(i => (
<Card>
<li>{i.address}</li>
</Card>
))}
</div>
);
}
}
export default Property;
didn't make me a wrong error console
I don't know how the response data comes in, but I found a problem with the code. You should pass keys.
{this.state.data.map(item => (
<Card key={item.id}>
<li>{item.address}</li>
</Card>
))}
https://reactjs.org/docs/lists-and-keys.html#keys
how to display html elements in react java script window through scripting. I have tried using json data but the elements are hard coded in html.
suggest me how to approach.
class App extends Component {
constructor() {
super();
this.state = {
data: '',
}
}
componentDidMount() {
fetch('http')
.then((response) => response.json())
.then((response) => {
// fetch the text
fetch(response.url)
.then(response2 => response2.text())
.then(response2 => {
this.setState({
data: response2
})
})
})
}
render() {
return (
<div>
{this.state.data}
</div>
)
}
}
export default App;
Can someone tell me what is wrong with my code below? I am making an HTTP request to Darksky API using 'superagent' and then trying to display the result in an h2 which isn't working. I tried logging it to console and it works perfectly but if I am trying to display it on the page it doesn't work. Could someone help me out pls, I am new to react and not sure what is going wrong.
import React, { Component } from "react";
import "./Body.css";
import Request from "superagent";
class Body extends Component {
constructor() {
super();
this.getData = this.getData.bind(this);
}
getData() {
var url = this.props.apiUrl;
Request.get(url)
.then(response => {
return(JSON.stringify(response.currently.summary));
})
.catch(error => {});
}
render() {
<div>
<h2>
{this.getData()}
</h2>
</div>
}
}
export default Body;
This is the other file where I am importing Body.js :-
import React, { Component } from "react";
import Body from "./Body";
import "./App.css";
class App extends Component {
render() {
return <Body
apiUrl="https://api.darksky.net/forecast/42a9693aecf45c358afbda0022c5cf65/28.5355,77.3910" />;
}
}
export default App;
You need to set your data in the state of the component, it fire new render:
constructor() {
super();
this.getData = this.getData.bind(this);
this.state = {data: {}}
}
componentDidMount() {
var url = this.props.apiUrl;
Request.get(url)
.then(response => this.setState({data: JSON.stringify(response.currently.summary)}))
.catch(error => {});
}
render(){
console.log("your data", this.state.data);
return <div>test</div>;
}
And work with this data with this.state.data.
I advise you to change getData() function to componentDidMount mehtod.
You should use a life cycle method(componentDidMount) with the use of state. It is recommended to make HTTP calls inside the componentDidMount() method.
constructor() {
super();
this.state = {
result: ''
};
}
componentDidMount(){
var url = this.props.apiUrl;
Request.get(url)
.then(response => {
this.setState({
result: JSON.stringify(response.currently.summary)
});
})
.catch(error => {});
}
render() {
<div>
<h2>
{this.state.result}
</h2>
</div>
}