We Keep Coding

UseState hook dont make the second argument as setter [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 month.
Improve this question
using useState() hook in react 18 and running the application, my browser in the console tells me that the setters that I created using it are not functions
const AdminPanel = () => {
const {brandVisible,SetBrandVisible} = useState(false)
const {typeVisible,SetTypeVisible} = useState(false)
const {dyeVisible,SetDyeVisible} = useState(false)
return (
<Container className="d-flex flex-column">
<Button variant={"outline-dark"} onClick={()=> SetTypeVisible(true)} className="mt-2 p-1">Добавить тип</Button>
<Button variant={"outline-dark"} onClick={()=> SetBrandVisible(true)} className="mt-2 p-1">Добавить производителя</Button>
<Button variant={"outline-dark"} onClick={()=> SetDyeVisible(true)} className="mt-2 p-1">Добавить краску</Button>
<CreateBrand show={brandVisible} onHide={()=> SetBrandVisible(false)}/>
<CreateDye show={dyeVisible} onHide={()=> SetDyeVisible(false)}/>
<CreateType show={typeVisible} onHide={()=> SetTypeVisible(false)}/>
</Container>
);
}
after reading this hook, I realized that I used it correctly

Official Docs
Wrong
const {brandVisible,SetBrandVisible} = useState(false)
Correct
const [brandVisible,SetBrandVisible] = useState(false)

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 can I get all the date from a multiple pages from a json api? [closed]

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 1 year ago.
Improve this question
There are 61 pages in this json file but with this call I only get the first page of it?
How can I get all of them, please?
Is there a loop or another way to use axios?
<template>
<div id="app">
<thead>
</thead>
<tbody>
{{items}}
</tbody>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items:[]
}
},
created() {
axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page=2&page_size=12&type=5`)
.then(response => {
this.items = response
})
}
}
</script>

Try without ?page=2&page_size=12&type=5:
axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/`)
or you can set number of articles per page you want to receive (in your case 61 pages with 12 articles on each):
axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page=1&page_size=732&type=5`)

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