import React, { useEffect, useState } from "react";
import axios from "axios";
import "./style.scss";
function Product() {
function dataget() {
axios.get(`http://localhost:9999/users/`).then((res) => {
setProducts(res.data);
});
}
const deleteclick = (_id) => {
axios.delete(`http://localhost:9999/users/${_id}`).then(() => {
dataget();
});
};
const [products, setProducts] = useState([]);
const [search, setSearch] = useState("");
useEffect(() => {
dataget();
}, []);
function handleclickplus() {
setProducts([
...products.sort((a, b) =>
a.title > b.title ? 1 : b.title > a.title ? -1 : 0
),
]);
}
function handleclickminus() {
setProducts([
...products.sort((a, b) =>
b.title > a.title ? 1 : a.title > b.title ? -1 : 0
),
]);
}
return (
<div>
<button onClick={() => { handleclickminus(); }}>Çoxdan aza</button>
<button onClick={() => { handleclickplus(); }}>Coxdan aza</button>
<input type={"text"} placeholder="search" onChange={(e) => { setSearch(e.target.value); }} />
{products
.filter((products) =>
products.title.toLowerCase().includes(search.toLowerCase()))
.map((element) => {
return (
<>
<img src={element.imageUrl} alt="" />
<h1>{element.description}</h1>
<h1>{element.title}</h1>
<h1>${element.price}</h1>
<button onClick={() => { deleteclick(element._id); }}> delete</button>
</>
);
})}
</div>
);
}
export default Product;
I tried to make the code more memorable and shorter in my writing, but I couldn't achieve exactly what I wanted.
I'm working on a react app and using useState to create a state, which will be sent via props and the sendData function (which updates state via props in the parent component). It works right now, but seems very unelegant/just plain bad.
Reduce this a.title > b.title ? 1 : b.title > a.title ? -1 : 0
To this: a.title.localeCompare(b.title)
to sort strings