Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I have done and tried the tutorial but the results are the same
when I want to retrieve an API with axios the results are just as illegible.
maybe this could be a repeated question but I was confused to finish it.
Please help
here's my code
constructor(){
super();
this.state={
datas:[],
}
}
componentDidMount() {
axios
.get('/jobs')
.then(res => {
const updatedData = res.datas.map(data => {
return {
...data
};
});
this.setState({ datas: updatedData, err: null });
// console.log(response)
})
.catch(err => {
this.setState({ err: true });
});
}
and from render side
render(){
let datas = <p style={{textAlign:'center'}}>Something went wrong!</p>
if(!this.state.err){
let datas = this.state.datas.map(data => {
return <Card
key={data.id}
desription={data.desription}
company={data.company}
/>
})
}
return(
<div>
<section>
<Navigation/>
</section>
<section>
<SearchBox></SearchBox>
</section>
<section>
<Category></Category>
</section>
<main>
{datas}
</main>
</div>
)
}
from the console when I call it
here's the image
Card components image :
from card components
what's the actual error? on the page.
and the res.datas should be res.data as the response does not have datas.
My account got blocked by some down votes questions, the funny thing is I have to re-edit them, even though I already have the accepted answer.I do not understand what's the point to do this.I am so frustrated by this stackoverflow system.
Now, I basically can do nothing but keep editing my questions, and they have all been answered. This is ridiculous !!!
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 10 months ago.
Improve this question
here is my code and I cannot find where the problem is
import React, {Component} from "react";
export default class Product extends Component{
state = {
id: this.props.product.id,
productName: this.props.product.productName,
price: this.props.product.price,
}
render(){
return<div className="col-lg-g">
<div className="card m-2">
<div className="card-body">
<div className="text-muted"># {this.props.id}</div>
<h5 className="p-5 border-top">{this.props.productName}</h5>
<div>$ {this.props.price}</div>
//{console.log(state)}
</div>
</div>
</div>
}
}
it shows Line 17:36: 'state' is not defined no-undef
whenever I run the code
That's a class, when you write state = ... , that's an instance property, hence you access it with this.state.
ok i did console.log(state) but i should have used console.log(this.state)
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I have fetched the array using the graphql query and stored it in a variable called mpbrands. Now I want to store it in the state and render it in my component. I tried the below but its not giving any response
constructor(props) {
super(props)
this.state = {
count: 0
}
}
async componentDidMount(){
let brandQuery = BrandPageInstance.getBrandList();
await fetchQuery(brandQuery).then((mpbrand) => {
this.setState({
count: mpbrand.items
})
console.log(count)
},
(error) => console.log(error)
)
}
In the console I am getting an error Uncaught (in promise) ReferenceError: count is not defined . My array structure is
mpbrand:
items: Array(10)
0: {default_value: "CHEVROLET", image: "image_url"}
Let me know how to do it. Since I am newbie not able to store it in the state
Try console.log(this.state.count) That should solve the reference error.
count is part of the state object. So you can access it via this.state.count.
First of all count is not your state. It's the property state.
Secondly, replacing console.log(count) with console.log(this.state.count) won't work (in the essence that you won't see count updated) since your new state will only be available to you in next render.
But setState provides a second callback where you can access the updated state like so :-
this.setState({
count: mpbrand.items
},()=>console.log(this.state.count))
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I currently have items in local storage, the console.log of data currently in local storage looks like this:
I want to simply map through these items and render the titles. I thought the below code would work, but nothing is being displayed, and I have no error messages. Do you know what I am doing wrong? Thank you.
import React, { useState, useEffect } from 'react';
import './../App.css';
import * as ReactBootStrap from 'react-bootstrap';
import {Link} from 'react-router-dom';
function Cart() {
const storageItems = JSON.parse(localStorage.getItem('product'));
console.log(storageItems)
return (
<div className="App">
{storageItems.map((item) => {
<p>item.title</p>
})}
</div>
);
}
export default Cart;
Try out :
{storageItems.map((item) => (<p>{item.title}</p>))}
because you missed to return the jsx
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
So I feel like there is something small here that im missing, but don't really know what.
constructor(props) {
super();
this.state = {
developers: [],
};
}
componentDidMount() {
fetch('API').then(features => {
return features.json();
}).then(data => {
let developers = data.features.map((info) => {
let developer_info = info.properties.name
return(
<div key={info.id}>
{info.properties.name}
{info.properties.skills}
</div>
)
})
this.setState({ developers: developers});
console.log("state", this.state.developers)
console.log(this.props)
})
}
I would ideally like to call
this.state.developers.name
or this.state.developers.skills
as i need this information, but currently i am only able to save one property in the this.state or i can call out each thing. as i have done above, but its not useful, bc i can't put the info where i need it.
what am i doing wrong?
As a rule of thumb, in state you only want to store "serialisable" data. In general this means you should not store functions or recursive data structures.
A good way to check if your data is serialisable is to think if you could (or attempt to) use JSON.stringify() on it.
What you are storing here is almost certainly not serialisable, as you are storing to state complete React elements. A React element is the thing that is returned when you do <Component /> (which is the same as React.createElement(Component, ...).
So, in your case, what you should do is
let developers = data.features.map((info) => {
const developer_info = {
name: info.properties.name,
skills: info.properties.skills
}
return developer_info;
});
this.setState({ developers: developers});
So now you would have an array of plain Javascript objects in your state.
Access the updated state in callback of setState:
this.setState({ developers }, () => console.log("state", this.state.developers));
You should also store the data in state instead of the component view code (the html tags).
Access this.state.developers's properties in the component view code instead.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I'm having trouble sending an action through a callback with the provided code below. The code does not send an action. However, I know if I attach the property Connected to a handler such as onClick, it will then execute. How can I get my code to work without one of these handlers?
(Note: In this example I'm using the MQTT.js library from npm).
Each time a connection message is received over the socket with MQTT, I want it to update the store to tell the front end when successfully connected. However, I need to keep the component a component, not a container.
Parent:
return (
<MQTT
Connected={() => {this.props.sendAction('MQTT_CONNECTED')}}
>
)
Child:
const MQTT = ({Connected}) => {
var client = mqtt.connect(mqttBroker, mqttConnectOptions);
client.on('connect', function() {
{Connected}
}
return <div>...</div>;
}
sendAction:
export function sendAction(action) {
return {
type: action
}
}
I made a mistake and forgot parentheses in {Connected()}.
Child should look like this:
const MQTT = ({Connected}) => {
var client = mqtt.connect(mqttBroker, mqttConnectOptions);
client.on('connect', function() {
{Connected()}
}
return <div>...</div>;
}
Is there any reason you can't just call the Connected function you're passing down as a prop?
const MQTT = ({Connected}) => {
var client = mqtt.connect(mqttBroker, mqttConnectOptions);
client.on('connect', function() {
this.props.Connected()
return <div>...</div>;
}
return null;
}