Можно ли избавиться от контейнерного компонента?

Question

[zlodiak]

У меня есть простейший компонент, который отображает данные из store. Использую react-redux. Проблема в том, что вместо одного компонента я написал два. Мне кажется, можно вполне обойтись одним. Подскажите пожалуйста как это сделать

Контейнерный компонент:

import { connect } from "react-redux";
import Messages from './Messages';

const mapStateToProps = state => {
  return {
    messages: state.messagesReducer.messages,
  }
}

export default connect(mapStateToProps, {})(Messages);

Презентационный компонент:

import React from 'react';
import styles from './Messages.module.css';

function Messages(props) {
  const messages = props.messages.map((item, i) => {
    return (
      <li className={styles.item} key={ i }>
        <div className={styles.date}>date: { item.date.toString() }</div>
        <div className={styles.name}>name: { item.name }</div>
        <div className={styles.gender}>gender: { item.gender }</div>
        <div className={styles.subject}>subject: { item.subject }</div>
        <div className={styles.text}>text: { item.text }</div>
      </li> 
    )
  });
  return (
    <ul className={styles.messages}>
      { messages }
    </ul>     
  );
}

export default Messages;

Comments

[Loli E1ON]

import React from 'react';
import styles from './Messages.module.css';

function Messages(props) {
  const messages = props.messages.map((item, i) => {
    return (
      <li className={styles.item} key={ i }>
        <div className={styles.date}>date: { item.date.toString() }</div>
        <div className={styles.name}>name: { item.name }</div>
        <div className={styles.gender}>gender: { item.gender }</div>
        <div className={styles.subject}>subject: { item.subject }</div>
        <div className={styles.text}>text: { item.text }</div>
      </li> 
    )
  });
  return (
    <ul className={styles.messages}>
      { messages }
    </ul>     
  );
}

const mapStateToProps = state => {
  return {
    messages: state.messagesReducer.messages,
  }
}

export default connect(mapStateToProps, {})(Messages);