переключать цвет фона нескольких кнопок индивидуально

Question

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

 const [selected, setSelected] = React.useState(false);
 const genres = ["Adventure", "Arts", "Leisure", "Nature"];
 const onSelect = () => setSelected(!selected);

  buttons = () =>
    genres.map((items) => (
      <TouchableOpacity
        key={items}
        onPress={() => onSelect()}
        style={[
          styles.button,
          { backgroundColor: selected ? "#00cc00" : "#f2f2f2" },
        ]}
      >
        <Text style={{ fontSize: 18 }}>{items}</Text>
      </TouchableOpacity>
    )); 

edit: Я хотел бы, чтобы одновременно было выбрано несколько кнопок. Если я нажму «Приключения» и «Отдых», оба цвета их кнопок изменятся, а остальные останутся без изменений. Цвета можно переключать на нескольких нажатиях

Answer 1

const [selected, setSelected] = React.useState(null);
const genres = ['Adventure', 'Arts', 'Leisure', 'Nature'];

buttons = () =>
    genres.map(item => (
        <TouchableOpacity
            key={item}
            onPress={() => setSelected(item)}
            style={[styles.button, { backgroundColor: item === selected ? '#00cc00' : '#f2f2f2' }]}
        >
            <Text style={{ fontSize: 18 }}>{items}</Text>
        </TouchableOpacity>
    ));

РЕДАКТИРОВАТЬ: Выбрано умножить

const [selected, setSelected] = React.useState([]);
const genres = ['Adventure', 'Arts', 'Leisure', 'Nature'];
const handlePress = genre =>
    selected.includes(genre) ? setSelected(selected.filter(s => s !== genre)) : setSelected([...selected, genre]);

buttons = () =>
    genres.map(item => (
        <TouchableOpacity
            key={item}
            onPress={() => handlePress(item)}
            style={[styles.button, { backgroundColor: selected.includes(genre) ? '#00cc00' : '#f2f2f2' }]}
        >
            <Text style={{ fontSize: 18 }}>{items}</Text>
        </TouchableOpacity>
    ));