const someIDs = [1, 2, 3];
const users = someIDs.map(async(ID) => {
const user = await getUser(ID);
return user;
});
cosnole.log(users);(async() => {
const someIDs = [1, 2, 3];
const users = [];
for (const ID of someIDs) {
const user = await getUser(ID);
users.push(user);
}
console.log(users);
})();
function Y({ x }) {
const [y, setY] = useState(x);
useEffect(() => {
if (x !== y) {
setY(x);
}
}, [x, y]);
return ( ... );
}const handler = (e) => {
const { target } = e;
const value = target.type === 'checkbox' ? target.checked : target.value;
const { name } = target;
setForm( f => ({ ...f, [name]: value }));
};const handler = () => {
setX(!x);
};const handler = useCallback(() => {
setX(!x);
}, []);
import React, { Fragment, useCallback, useState } from "react";
import ReactDOM from "react-dom";
const arrProd = [
{
price: "5.75",
sold: "100"
},
{
price: "2.36",
sold: "15"
},
{
price: "5.48",
sold: "20"
},
{
price: "4.49",
sold: "200"
},
{
price: "3.15",
sold: "258"
},
{
price: "9.99",
sold: "479"
},
{
price: "4.8",
sold: "147"
},
{
price: "8",
sold: "951"
},
{
price: "4.27",
sold: "753"
},
{
price: "2.46",
sold: "852"
},
{
price: "4.99",
sold: "742"
},
{
price: "3.49",
sold: "10"
},
{
price: "2",
sold: "26"
},
{
price: "3.83",
sold: "39"
},
{
price: "9.98",
sold: "47"
},
{
price: "6.77",
sold: "96"
}
];
function App() {
const [form, setForm] = useState({
minPrice: "",
maxPrice: "",
sold: ""
});
const { minPrice, maxPrice, sold } = form;
const [products, setProducts] = useState(arrProd);
const handleChange = useCallback(e => {
const { name, value } = e.target;
setForm(f => ({ ...f, [name]: value }));
}, []);
const handleSubmit = useCallback(
e => {
e.preventDefault();
const filteredProducts = arrProd.filter(
product =>
(!maxPrice || +maxPrice >= +product.price) &&
(!minPrice || +minPrice <= +product.price) &&
(!sold || +sold >= +product.sold)
);
setProducts(filteredProducts);
},
[minPrice, maxPrice, sold]
);
const isPriceRangeValid = !minPrice || !maxPrice || +minPrice <= +maxPrice;
const isSoldValid = +sold >= 0;
return (
<Fragment>
<form onSubmit={handleSubmit}>
{!isPriceRangeValid && <div>"Please provide a valid price range"</div>}
Min
<input
type="text"
name="minPrice"
size={6}
maxLength={10}
value={minPrice}
onChange={handleChange}
/>
Max
<input
type="text"
name="maxPrice"
size={6}
maxLength={10}
value={maxPrice}
onChange={handleChange}
/>
{!isSoldValid && <div>Please provide a valid sold value</div>}
Sold
<input
type="text"
name="sold"
size={6}
maxLength={10}
value={sold}
onChange={handleChange}
/>
<input type="submit" title={"Submit price range"} value={"Go"} />
</form>
<ul>
{products.map((product, i) => (
<li key={product.sold + i}>
{product.price} - {product.sold}
</li>
))}
</ul>
</Fragment>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
const useBanner = (array, yardage) => {
const [bannArr, setBannArr] = useState(() => array.slice(0, yardage));
const [bannListIndex, setBannIndex] = useState(1);
return {
....
};
};const inputMaxMin = useCallback(
({ target: { value, name } }) => {
name === "maxPrice"
? setPrice(({ minPrice }) => ({ maxPrice: value, minPrice }))
: setPrice(({ maxPrice }) => ({ minPrice: value, maxPrice }));
},
[],
);
function isSStitle(arg: any): arg is SStitle {
return arg && typeof arg.title === 'string';
}class SStitle {
title: string;
constructor(title: string) {
this.title = title;
}
}
const x:SStitle = new SStitle("AZ5");
if(x instanceof SStitle){...}
Request0() {
// this.abort()
// можно делать это тут, если запрос должен быть только один, а можно в useEffect
this.abortController = new AbortController()
// fetch
finally {
this.abortController = null
}
}
abort() {
if (this.abortController) {
this.abortController.abort();
this.abortController = null
}
}
interface History<HistoryLocationState = LocationState>type LocationState = any;