Import React, { useState, useEffect } from "react"; import { makeStyles

Question

Import React, { useState, useEffect } from "react"; import { makeStyles

} from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import axios from "axios";
import { formatDistance } from "date-fns";
import { ru } from "date-fns/locale";
import { Button } from "styled-button-component";
import { NavLink } from "react-router-dom";

const useStyles = makeStyles({
root: {
display: "block",
marginTop: 50,
marginBottom: 50,
border: " 2px solid grey",
boxShadow: " 0 0 5px 3px white",
cursor: "pointer",
borderRadius: "10px",
maxWidth: 700,
marginLeft: "auto",
marginRight: "auto",

height: "150%",
transition: ".2s linear",
"&:hover": {
boxShadow: "700px 0 0 0 rgba(195, 195, 190, .2) inset",
},
},

titles: {
fontSize: 22,
fontWeight: "bold",
textAlign: "center",
},
pos: {
fontSize: 14,
marginBottom: 12,
},
});

export const CardOrders = () => {
const [orders, setOrders] = useState([]);
const [id, setId] = useState(null);

useEffect(() => {
axios
.get(http://localhost:3000/orders/)
.then((res) => {
console.log("Orders: ", res);
setOrders(res.data);
})

.catch((err) => {
console.log("err Orders", err);
});
}, []);
const classes = useStyles();

return (
<div>
{orders.map((order, i) => {
const nowData = new Date();
const dateCreatedOrder = new Date(order.createdAt);
const distance = formatDistance(nowData, dateCreatedOrder, {
locale: ru,
});
return (
<Card className={classes.root} key={i}>
<CardContent>
<Typography
className={classes.titles}
color="initial"
gutterBottom
>
{order.name}
</Typography>

<Typography className={classes.pos} color="textSecondary">
{order.description.substring(0, 200) + "..."}
</Typography>

<Typography color="initial">
Срок выпонления:
{order.date <= 4
? order.date + " дня"
: order.date + " дней"}{" "}
</Typography>
<p>Категория: {order.categories}</p>
<p>Опубликован: {distance + " назад"} </p>
</CardContent>

<CardActions>
<Button m1 outline dark>
Узнать больше
</Button>
</CardActions>
</Card>
);
})}
</div>
);
};
Вот компонент