Передача значения с помощью onClick и обновление двух значений состояния с помощью хуков

Question

У меня есть событие onClick по этой ссылке:

<a href="#" onClick={() => show()}>{data.game.title}</a>

Это используется для скрытия элемента следующим образом:

const [isShown, setIsShown] = React.useState(false);

const show = (title) => setIsShown(true);

Теперь я также хочу передать значение из это onClick и сохранить его в моем состоянии.

Как бы я передать значение функции?

Я пытался сделать это, и ничего не происходит:

const [gameIdVal, setGameIdValue] = React.useState(false);

<a href="#" onClick={() => show(data.game.id)}>{data.game.title}</a>

const show = (gameId) => setIsShown(true), setGameIdValue(gameId);

Но Я продолжаю получать эту ошибку:

Identifier 'setGameIdValue' has already been declared

Но я не понимаю этого, потому что она нигде не установлена.

Есть ли способ исправить это?

Спасибо!

Answer 1

В этой строке:

const show = (gameId) => setIsShown(true), setGameIdValue(gameId);

вы не использовали фигурные скобки и JS анализатор считает, что вы хотите объявить функцию с именем setGameIdValue . правильная форма:

const show = (gameId) => {
  setIsShown(true);
  setGameIdValue(gameId);
}

Answer 2

Если вам нужно больше, чем просто строка кода в теле вашей функции , то вы можете использовать block body syntax.

Важные вещи, которые следует помнить при использовании block syntax заключается в том, что для переноса тела функции используется curly braces {}.

Вы можете сделать это следующим образом:

const [gameIdVal, setGameIdValue] = React.useState(false);

const show = (gameId) => {
    setIsShown(true);
    setGameIdValue(gameId)};
}

Answer 3

Вам просто нужно добавить фигурные скобки, например:

const show = (gameId) => {
  setIsShown(true);
  setGameIdValue(gameId);
}