Доступ к значениям фильтруемых объектов из реквизита (JS / React)

Question

У меня глупый вопрос.Я пытаюсь выучить некоторые React и столкнулся с проблемой.

Я использую mapStateToProps для возврата отфильтрованного объекта, соответствующего определенному идентификатору из OwnProps.Эта часть отлично работает.Когда я регистрирую состояние, я вижу, что верный элемент был возвращен.Проблема в том, что я не уверен, как получить доступ к значениям компонента, которому он передан.

Вот мой код:

const ProductModal = (props) => {
  return (
    <Modal 
        isOpen={props.isOpen}
        onRequestClose={props.handleCloseModal}
        contentLabel="Modal"
        className="modal"
    >
    <h3>Title</h3>
    <p>Item Name Here</p>
    <p>Item Style Here</p>
    <p>Item Sale Here</p>
    </Modal>
  )
}

const mapStateToProps = (state, props) => {  
  return {
    item: state.filter((item) => {
      return item.id === props.selectedItem
    })
  }
}
const connectedOptionModal = connect(mapStateToProps)(OptionModal);


export default connectedOptionModal;

Когда я регистрирую реквизиты в компоненте, я вижу элементы, но не уверен, как на самом деле получить доступ к значениям.

Когда я проверяю Chrome Console, это то, что я вижу:

item: Array(1)
  0: {
      id: 123456,
      name: t-shirts, 
      style: graphic, 
      sale: false
      }

Возможно, существует способ вернуть "сплющенное" состояние, чтобы устранить 0: ?

Извиняюсь, если это глупый вопрос.

Спасибо за любую помощь.

Answer 1

Вы можете попробовать использовать Array.prototype.find () .find() возвращает первый элемент в массиве, соответствующий предикату, или undefined, если ничего не найдено.Это может помочь избежать необходимости доступа к элементу массива, используя [0] или аналогичный.

const ProductModal = (props) => {
  return (
    <Modal 
        isOpen={props.isOpen}
        onRequestClose={props.handleCloseModal}
        contentLabel="Modal"
        className="modal"
    >
    <h3>Title</h3>
    {props.item &&
      (
        <div>{props.item.name} {props.item.style} {props.item.sale.toString()}</div>
      )
    }
    </Modal>
  )
}

const mapStateToProps = (state, props) => {  
  return {
    item: state.find((item) => {
      return item.id === props.selectedItem
    })
  }
}
const connectedOptionModal = connect(mapStateToProps)(OptionModal);

export default connectedOptionModal;

Надеюсь, это поможет!