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

Question

[mosikus]

Есть объект:

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. Как это сделать?

Answer 1

[0xD34F]

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>}

UPD. Вынесено из комментариев:

из-за дивов внутри кнопки нажатие не срабатывало

Можно вернуть div'ы обратно.

Чтобы работало как задумано, надо будет в обработчике клика заменить target на currentTarget.

Comments

[mosikus]

А если кнопки у меня выводятся таким https://codesandbox.io/s/little-bush-8h6bz образом, не получится на них навесить функцию переключения ?

[0xD34F]

Получится.

[mosikus]

Не получается. Вешаю на кнопку key={n} data-id={n} onClick={onClick}, пишу {item && {item.title} ---- {item.category}} и ничего не происходит по нажатии.

[0xD34F]

Дальше что? У меня всё получается.

[mosikus]

0xD34F, Спасибо вам большое. Извините, всё действительно работает. У меня всё правильно было написано, но из-за дивов внутри кнопки нажатие не срабатывало, из-за чего я думал, что не работает. Спасибо ещё раз.

Answer 2

[Alexander Dozmorov]

Добавьте фильтрацию

{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>)}

Comments

[mosikus]

Ну это будет отображать только t1. Если вместо 't1' написать, например, {props.active}, то бьёт ошибку. Как правильно записать ?

[Alexander Dozmorov]

Вероятно, что-то делаете не так. Понятно же, что если будет подставляться правильный ключ, то будет работать верно.