React Component Design

Question

Building out a React component that is supposed to hold the following information and display it in a feed-like page. The idea is to later map over the individual entries in an array.

• Author
• Timestamp
• Message Title
• Message body

Currently, I have the following code in one file (BuildingUpdateBox.js):

import React from 'react';
import "./BuildingUpdateBox.css"


const BuildingUpdateBoxHeader = (props) => {
const author = props.author ? `Author: ${props.author}` : 'No Author'
return (
  <div className="building-update-box-header">
    <span className="building-update-box-header-item">{author}</span>
    <span className="building-update-box-header-item">Timestamp: {props.timestamp}</span>
</div>
)
}

const BuildingUpdateBoxBody = (props) => {
return (
  <div className="building-update-box-body">
    <div className="building-update-box-body-title"><h2>{props.title}</h2></div>
    <div className="building-update-box-body-message"><p>{props.message}</p></div>
  </div>
)
}

const BuildingUpdateBox = (props) => {
return (
  <div className="wrapper">
    <div className="building-update-box">
      <BuildingUpdateBoxHeader
        author={props.content.author}
        timestamp={props.content.timestamp}
      />
      <BuildingUpdateBoxBody
        title={props.content.title}
        message={props.content.message}
      />
    </div>
  </div>
)
}

export default BuildingUpdateBox;

And in App.js (I currently use create-react-app):

const message = {
  author: 'Joe Smith',
  timestamp: '2018/12/22',
  title: 'Broken Heater',
  message: 'Dear tenants, we will have a plumber onsite tomorrow, who will replace the broken boiler. We apologize for the inconvenience. If you have any questions, please feel free to reach out to 123-456-7890.'
};

class App extends Component {
  render() {
    return (
      <div>
        <BuildingUpdateBox content={message} />
      </div>
    );
  }
}

I'm looking to hear if I should:

• Place the functional components into their own files (with reasoning)
• Even use 3 separate functions, since I don't ever see the Header or Body being used without the Box and vice versa
• Do anything with the way I import the CSS

Answer 1

Generally if you want a more in depth review you should provide more code and a potential specifics you want to improve on; your code is very thin, and so it's a little difficult to help you expand on it, however, I would say that there's a few different things you can do to this to improve or follow a different direction forward.

Your use of pure components is good for BuildingUpdateBoxHeader and BuildingUpdateBoxBody as using primitive props is better for performance. However, using a content object inside your props for BuildingUpdateBox means React cannot shallow compare your props and is unable to determine when not to rerender the component, causing potentially wasted rerenders.

I would recommend trying JSS (css in js) to embed your styles directly in your application for an alternate solution to specifying className manually. This couples your css with its implementation rather than needing to update both the css & js when you modify them.