We Keep Coding

Line 17:36: 'state' is not defined no-undef [closed]

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)

Change state of parent component in child component [closed]

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 last year.
Improve this question
I want to change a value in the parent component by changing the state in the child component which is passed by props.
// This is the parent component
const [showEdit, setShowEdit] = useState(false);
<EditApplicationSettings
appSettings={appSettings}
changeState={(showEdit) => setShowEdit(showEdit)}
/>
// This is the child component
export default function EditApplicationSettings({ appSettings, props }) {
return (
<button
className="button-red"
onClick={() => props.changeState(false)}
>
Cancel
</button>
);
}
When I click on the button, that should change the state in parent, but instead, I get an error.
TypeError: Cannot read properties of undefined (reading 'changeState')
Where did I do wrong in passing the props?

In React terms props tends to refer to the entire property object:
EditApplicationSettings(props)
But since you're destructuring the properties from the object you need to reference the changeState property explicitly:
EditApplicationSettings({ appSettings, changeState })
and
onClick={() => changeState(false)}

To solve this error
TypeError: Cannot read properties of undefined (reading 'changeState')
then this line
export default function EditApplicationSettings({ appSettings, props }) {
should be
export default function EditApplicationSettings({ appSettings, ...props }) {
^^^
You could read more at MDN doc for destructuring assignment

How to add react-hooks on the ready site? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I know how to add only react and react-Dom , but if we will write some text on the react-hooks as the code:
const state = useState('name')
We will receive an error :
Uncaught ReferenceError: useState is not defined
ITS ISNT APP , Its just a ready site i know how to add hooks on the app , but dont know how on the ready site

you need to import useState from React as shown on https://reactjs.org/docs/hooks-state.html
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}```

How to map over and return items in localStorage? [closed]

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

Can't Fetch API with Axios in ReactJS [closed]

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 !!!