Как развернуть меню или закрыть меню или array.map()

#reactjs

Вопрос:

Я хочу показать / скрыть меню в зависимости от свойства расширенного состояния. Однако эта часть находится внутри цикла массива карт, поэтому, как только вы нажимаете на действие, чтобы развернуть меню для одного элемента в массиве, оно расширяется для всех элементов.

Интересно, есть ли способ добиться этого.

     const [expanded, setExpanded] = useState(false);
    
    
     const handleExpandClick = () => {
        setExpanded(!expanded);
      };
    
    return (
    {results.map((result) => (
    <Grid item key={result.owner_name} xs={12} sm={12} md={12}>
    <Card className={classes.root} variant="outlined">
    <Link  to={`/guilds/${result.owner_name}`}>
      <CardHeader 
        avatar={
          <Avatar alt={result.owner_name} src={logo( result.owner_name )} className={classes.large} />
        }
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title={ result.owner_name }
        subheader={ datec(result.date_check) }
      />
    </Link>
      <CardContent>

      </CardContent>
      <CardActions disableSpacing>
        <IconButton
          className={clsx(classes.expand, {
            [classes.expandOpen]: expanded,
          })}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
        </IconButton>
      </CardActions>

      <Collapse in={expanded} timeout="auto" unmountOnExit>
         Stuff
      </Collapse>
      </Card>
      </Grid>
    )

1. Я действительно не вижу, где находится цикл в этом коде. Это может быть полезно, если вы добавите больше кода.

2. Я думаю, вы можете отслеживать на основе идентификатора. И, пожалуйста, укажите дополнительную информацию

3. Я добавил больше кода, спасибо

4. поэтому я использую owner_name в качестве идентификатора ключа

Ответ №1:

Я создал образец базы кода, я не уверен, что вы ищете подобный вариант использования. Первоначально все состояния будут свернуты, вы можете нажать на идентификатор отображения, чтобы увидеть изменение статуса.

 export default function App() {
  const values = [{ id: 1000 }, { id: 1001 }, { id: 1003 }, { id: 1004 }];
  const [expandedId, setExpandedId] = useState();

  return (
    <div className="App">
      {values.map((val) => (
        <div onClick={() => setExpandedId(expandedId !== val.id ? val.id: "" )}>
          {val.id} -- {expandedId === val.id ? "Expanded" : "Collapsed"}
        </div>
      ))}
    </div>
  );
}

Рабочая демонстрация — https://codesandbox.io/s/bold-antonelli-mr7fc?file=/src/App.js:65-456