Как по клику отрисовывать разные данные?

Question

[Ольга]

Данные для страницы хранятся внутри объекта. Объект состоит из двух массивов в каждом из которых разные данные. Нужно при клике на кнопку показывать одни данные(из первого массива) при клике на другую кнопку - данные второго массива.
структура примерно такая:

body:{
arr1: [{a:1}, {b:2}, {c: 3}],
arr2: [{a:100}, {b:200}, {c: 300}],
}

Answer 1

[Максим]

Загружаете ваши данные в state, так же там содержите переменную, в которой указано какой из подмасивов показывать.
Далее в рендер функции проверяете какой массив нужно показывать.
Делаете обработчик на кнопку, который при клике меняет переменную хранящую номер подмассива для показа в стейте - реакт автоматически перерисует.

Набросок:

...this.state = {
  data: [ [{a:1}, {b:2}, {c: 3}], [{a: 100}, {b: 200}, {c: 300}] ],
  index: 0, // для показывания первого подмассива
} 
...
onBtnClick = (e) => {
  this.setState({ index: e.currentTarget }) // старая запись
  this.setState( prev => { ...prev, { index: e.currentTarget - 1}}) // новая (рекоммендуемая?) запись
}
...
render() {
  const { index, data } = this.state

  return (
    <div>
      <button onClick={this.onBtnClick}>0</button>
      <button onClick={this.onBtnClick}>1</button>
      <p> { data[index] } </p> // само собой тут должна быть какая-то верстка в зависимости от ваших данных
    </div>
  )
}
...

Comments

[Ольга]

а если данные это не массив, а объект, в котором два массива, примерно так:

body:{
arr1: [{a:1}, {b:2}, {c: 3}],
arr2: [{a:100}, {b:200}, {c: 300}],
}

[Максим]

Ольга, все тоже самое. Только с кнопок передавайте не индекс, а ключ (arr1, arr2 ... хранить его можно в data-* атрибутах и считывать как e.currentTarget.dataset.ATTR_NAME) , в стейте само собой, тоже не индекс будет храниться, а ключ 'arr1', или 'arr2'

Answer 2

[0xD34F]

https://jsfiddle.net/356pm4fh/