I cant get value from path url react.js I want to get id before property-edit url
it show error ..............................................................................................................................................................................................................................................................................
error img
url img
route
class
ADD withRouter
import React from "react";
import { firestore } from "../../firebase/firebase.utils";
import {withRouter} from 'react-router';
class Editproperty extends React.Component {
constructor(props) {
super(props);
this.state = {
property: [],
};
}
componentDidMount() {
var todos = [];
console.log(""+this.props.match.params.id)
firestore
.collection("house")
.get()
.then((doc) => {
let dict = { id: doc.id, ...doc.data() };
todos.push(dict);
this.setState({
property: todos,
});
})
.catch((err) => {
console.log("Error getting documents", err);
});
console.log(this.state.property)
}
render() {
return (
<React.Fragment>
<p>Hello</p>
</React.Fragment>
);
}
}
export default withRouter(Editproperty);
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 cannot figure out what I am doing wrong here. I submit a request to the API and an object is returned, but I cannot seem to get the component to render.
//Code
import React, { Component } from "react"
import axios from 'axios';
class Weather extends Component {
constructor(props){
super(props)
this.state = {
posts: [],
};
}
componentDidMount() {
const query = "Paris";
const apiKey = {api key here};
const unit = "metric";
const url = "https://api.openweathermap.org/data/2.5/weather?q=" + query + "&appid=" + apiKey + "&units=" + unit;
axios.get(`${url}`)
.then(response => {
console.log(response);
this.setState({posts: response.data})
})
.catch(error => {
console.log(error);
})
}
render() {
const { posts } = this.state;
return(
<>
{posts.length ? <div>Temperature: {posts.main.temp} Description: {posts.weather[0].description}</div> : null}
</>
);
}
}
export default Weather;
enter image description here
i'm new to React and I need help with passing props to API URL. I have two class components -> (MyClass) works fine. However when I use variable from MyClass as props in other class component (MyOtherClass), it seems to work only in "render" part. I mean <div> variable: {variable}, url : {url2}</div> is shown in app as expected but when I try to pass this variable from props to API URL, it is not working and instead the URL looks like this: "http://localhost:55111/status/[object Object]". Any ideas what might cause the problem??
Here's my code:
import React, { Component } from 'react'
import axios from 'axios'
export default class MyClass extends Component {
constructor(props) {
super(props);
this.state = {
data: {}
}
}
componentDidMount() {
axios
.get("http://localhost:55111/start")
.then(response => {
this.setState({
data: response.data
});
console.log(this.state.data);
})
.catch(err => {
this.err = err;
});
}
render() {
const variable = this.state.data.sent
return (
<div>
<h1>Hello worlds</h1>
<p>var: {variable}</p>
<MyOtherClass variable={variable} />
</div>
);
}
}
This is the other class component causing troubles:
class MyOtherClass extends Component {
constructor(props) {
super(props);
this.state = {
data: {}
};
}
async componentDidMount() {
const {variable} = this.props
axios.get(`http://localhost:55111/status/${variable}`)
.then(response => {
this.setState({
data: response
});
console.log(this.state);
})
render() {
const { variable } = this.props
const url2 = `http://localhost:55111/status/${variable}`
return (
<div>variable: {variable}, url : {url2}</div>
);
}
}
import React, { Component } from 'react'
import axios from 'axios'
export default class MyClass extends Component {
constructor(props) {
super(props);
this.state = {
data: {}
}
}
componentDidMount() {
this.getData()
}
async getData() => {
const response = await axios.get("http://localhost:55111/start")
this.setState({data: response.data})
}
render() {
const variable = this.state.data.sent
return (
<div>
<h1>Hello worlds</h1>
<p>var: {variable}</p>
<MyOtherClass variable={variable} />
</div>
);
}
}
Use the async await.
Iam trying to print back the value fetched from API. The data is coming but not able to set the state
Tried everything
React.js
import React, { Component } from 'react'
import axios from 'axios'
class Admin extends Component {
constructor(props) {
super(props)
this.state = {
users: []
}
}
componentDidMount(){
axios.get('/api/adminUsers')
.then(response =>{
this.setState({users: response.data})
console.log(response.data)
console.log(this.setState({users: response.data}))
})
.catch(error=>{
this.setState({ errorMsg: "Something is wrong here"})
console.log(error)
})
}
render() {
const{users} = this.state
<div>
{
users.length ?
users.map(user => <div key=
{user.id}>{user.name}</div>)
: null
}
</div>
)
}
}
export default Admin
The response.data showing in console is:
{[
created_at: "2019-08-31 14:06:29"
email: "amit.khare588#gmail.com5"
email_verified_at: null
id: 2
name: "Amit Khare"
role: "Doctor"
updated_at: "2019-08-31 14:06:29"
]}
I just want to print the data back
The code seems fine below is a fully working example:
import React from "react";
import ReactDOM from "react-dom";
class Admin extends React.Component {
constructor(props) {
super(props)
this.state = {
users: [],
errorMsg: ''
}
}
componentDidMount() {
axios.get('/api/adminUsers')
.then(response => {
this.setState({users: response.data.users})
console.log(response.data)
})
.catch(error => {
this.setState({errorMsg: "Something is wrong here"})
console.log(error)
})
}
render() {
const {users, errorMsg} = this.state;
return <div>
{users.length ? users.map(user => <div key={user.id}>{user.name}</div>) : null}
{errorMsg ? <div>{errorMsg}</div> : null}
</div>
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Admin/>, rootElement);
Checkout the codesandbox: https://codesandbox.io/s/nice-fermi-ku1jr
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>
}