Sample of various patterns and standards for FWI function components (based on https://gist.github.com/markerikson/47fff93c92286db72b22bab5b02e2da3)

ReactFunctionComponent.jsx

import React from "react";
import PropTypes from "prop-types";

const MyComponent = ({ prop1, prop2, className }) => {
  let someMessage = "This is a message, it may change";
  
  // If a value could change use `let` and if/else statements rather
  // than a function that returns a value.
  if (prop1) {
    someMessage = "The message has changed based on some condition";
  }
  
  // Render conditional components into variables
  const conditionalComponent = prop2 ? <SomeComponent /> : <AnotherComponent />

  // Keep inline logic out of JSX, or use minimally. Lots of logic
  // in JSX is an indicator that the code could be broken into a
  // seperate component.
  return (
    <div className={className}>
      {someMessage}
      {conditionalComponent}
    </div>
  )
}

MyComponent.propTypes = {
  prop1: PropTypes.string.isRequired,
  prop2: PropTypes.bool.isRequired,
  className: PropTypes.string,
}

export default MyComponent;