Как вывести Item из ItemList

247

21 января 2019, 02:20

Как выводить один элемент в main, соответствующий той ссылке, которую кликаешь слева?

Я записываю index в id и пытаюсь потом вывести данные, у которых id и index совпадают. Смотрю на refs, но что то мне кажется не туда. Еще чувствую, что придумываю лажу, есть способ проще. Данные хранятся в store redux. Сейчас у меня справа выводятся все итемы. А нужно только один, который выбрал. А по умолчанию чтобы был первый например.

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Item } from 'semantic-ui-react'; 
 
class App extends Component { 
  constructor(props) { 
      super(props); 
      this.state = { 
          currentClient: [], 
          isToggleOn: true 
      }; 
      this.handleClick = this.handleClick.bind(this); 
  } 
  handleClick(e) { 
      this.setState(state => ({ 
            isToggleOn: !state.isToggleOn 
      })); 
  } 
  render() { 
    console.log(this.props.testStore); 
    return ( 
      <div className="App"> 
          <aside> 
              <Item.Group link> 
                  {this.props.testStore.map((arrayItem, index) => 
 
                      <Item key={index} id={index} onClick={this.handleClick}> 
                          <Item.Image size='tiny' src={arrayItem.general.avatar} /> 
 
                          <Item.Content> 
                              <Item.Header>{`${arrayItem.general.firstName} ${arrayItem.general.lastName}`}</Item.Header> 
                          </Item.Content> 
                      </Item> 
                  )} 
              </Item.Group> 
          </aside> 
          <main> 
              {this.props.testStore.map((arrayItem, index) => 
 
                  <div key={index}> 
                      <img src={arrayItem.general.avatar} alt=""/> 
                      <p>{arrayItem.address.street}</p> 
                  </div> 
              )} 
          </main> 
      </div> 
    ); 
  } 
} 
 
export default connect( 
    state => ({ 
        testStore: state 
    }), 
    dispatch => ({}) 
)(App);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

при клике на элемент, надо записать его index в локальный стор, например как id, затем отфильтровать массив по этому id:
this.props.testStore.filter((arrayItem, index) => index === this.state.id), получится массив из 1 нашего элемента, дальше уже можно отрендерить через .map