Задать вопрос
@mosikus
react

Как при нажатии на кнопку выбирать элемент объекта и выводить его?

Есть объект:
const test = {
   "title": {
       "t1":{
	      "id": 1,
	      "title":"Test1",
	      "category": "Test1111"
        },
       "t2":{
	      "id": 2,
	      "title":"Test2",
	      "category": "Test2222"
        },  
       "t3":{
     	  "id": 3,
	      "title":"Test3",
	      "category": "Test3333"
        }     
    }
}

Вывожу его:
{Object.keys(test.title).map(item => <div key={test.title[item].id}>{test.title[item].title} ---- {test.title[item].category}</div>)}
.
А теперь мне нужно решить следующую задачу:
Есть 3 кнопки. При нажатии на первую кнопку выводится t1, при нажатии на вторую - t2, на третью - t3. Как это сделать?
  • Вопрос задан
  • 222 просмотра
Комментировать
Подписаться 3 Средний Комментировать
Решения вопроса 2
0xD34F
@0xD34F Куратор тега React 
const [ active, setActive ] = useState(null);
const item = test.title[active];

const onClick = e => setActive(e.target.dataset.id);

Кнопки:

{Object.keys(test.title).map(n =>
  <button key={n} data-id={n} onClick={onClick}>{n}</button>
)}

Выбранный элемент:

{item && <div>{item.title} ---- {item.category}</div>}
Ответ написан
5 комментариев
5 комментариев
@Dozalex
Senior Frontend Developer
Добавьте фильтрацию
{Object.keys(test.title).filter(key => key === 't1').map(key => <div key={test.title[key].id}>{test.title[key].title} ---- {test.title[key].category}</div>)}
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Написать код на python
19 апр. 2024, в 03:01
1000 руб./за проект
Ещё заказы