Блог

У меня есть элемент карты в элементе SwiperSlide. Мне нужно понять, какую карту пользователь теперь видит и как извлечь информацию с этой карты.

MyStats.js

 import React, { useState } from 'react';
import items from './allData';
import Menu from './Menu';
import Button from './Button';

const allCategories = ['All', ...new Set(items.map(item => item.category))];
console.log(allCategories);
function Mystats() {
  const [menuItem, setMenuItem] = useState(items);
  const [buttons, setButtons] = useState(allCategories);

var filter = (button) =>{

   if(button === 'All'){
   setMenuItem(items);
   return;
 }

 const filteredData = items.filter(item => item.category ===  button);
 setMenuItem(filteredData)
}
  return (
   <>
    <Button button={buttons} filter={filter} />
       <Menu menuItem={menuItem}/>
   </>
 );
}

 export default Mystats;
 

MyStat.js это страница, на которой размещаются мои карточки, и они перенаправляют пользователя на следующую страницу. Этот Javascript берет все элементы из другого файла js и создает новую карточку в меню.

Menu.js

 import React from 'react'
import {Link} from 'react-router-dom';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import { makeStyles } from '@material-ui/core/styles';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
const useStyles = makeStyles((theme) => ({
   root: {
     maxWidth: 300,
   }
 }));
 function Menu({menuItem}) {
     const classes = useStyles();
      return (
         <Swiper style={{display: 'flex', flexDirection: 'row'}}>
          <div className="item">
        {
          menuItem.map((item) =>{
            return (
              <SwiperSlide style={{display: 'flex',alignItems: 'center', flexDirection: 'row'}}>
                <Link to={{pathname:"tour"}}>
                  <Card className={classes.root} >
                    <CardHeader
                        title={item.name}
                      />
                      <CardMedia
                        image="/static/images/cards/paella.jpg"
                        title="Paella dish"
                      />
                      <CardContent>
                        {item.number}
                      </CardContent>
                    </Card>
                  </Link>
                </SwiperSlide>
              )
            })
        }
    </div>
  </Swiper>
)
 }

export default Menu;
 

Menu.js create cards for user and put them into swiper.