Блог

Я хочу создать вкладки для категорий. Я получаю категории данных с помощью graphql и хочу отобразить данные списка по выбранной категории.

категория вкладок

 function a11yProps(index) {
  console.log(index);
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}
.....
const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
......
{data.categories.map((category, i) => (
            <Tab
              key={category.id}
              label={category.name}
              id={`scrollable-prevent-tab-${category.id}`}
              aria-controls={`scrollable-prevent-tabpanel-${category.id}`}
              {...a11yProps(category.id)}
            />
          ))}
<ItemNews value={value} index={a11yProps()} />
  

ItemNews — это компонент для отображения данных списка. И ниже некоторый код для получения данных списка

 const { value, index } = props;
const { loading, error, data, refetch } = detailCategory({
    variables: {
      id: index,
    },
  });