Как правильно создавать и отображать функциональные компоненты?

Попробуй это

class MyComponent extends React.Component {
  OtherComponent = (props) => {
    return (
      <div>
        test
      </div>
    );
   }

   render() {
     return (
       <div>
         {this.OtherComponent("test")}
       </div>
   )}

}

Например этот работает. Смотрите документы ;) React — Составление компонентов

function OtherComponent(props) {
  return <div>test</div>;
}

class App extends React.Component {
  render() {
    return (
      <div>
        <OtherComponent props = "test" />
      </div>
    );
  }
}

Вы не можете определить компонент внутри другого компонента. Функциональный компонент означает, что компонент создан из функции и не является классом. У него не может быть собственного состояния, потому что состояние инициализируется в конструкторе класса. Прочтите эту статью для получения дополнительной информации https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

const otherComponent = (props) =>
  <div>
    test
  </div>;

Вот еще один способ. Неправильно объявлять компонент в функции рендеринга. Если он используется исключительно в родительском компоненте, почему бы не сделать это явным и не использовать статический

class MyComponent extends React.Component {
  static myOtherComponent = (props) => <div>{'test'}</div>

render(){
  return(
    <div>
      <MyComponent.myOtherComponent  {props} />
    </div>
  )
}

Поведение myOtherComponent контролируется исключительно через реквизиты, которые он получает, у него не будет собственного состояния.

Или вы можете просто сделать его отдельным компонентом, например

export default myOtherComponent  = (props) => ()

и импортируйте его в MyComponent. Обратите внимание, что теперь с хуками (см. React Docs) вы можете использовать хуки для имитации состояния и т. д. в функциональных компонентах, и последний подход может быть вашим самым чистым и гибким подходом.

Таким образом, вы можете определить функциональный компонент

function OtherComponent(props) {
  return <div>{props}</div>;
}

И теперь вы можете использовать функциональный компонент в своем приложении (компонент класса), как показано ниже.

class App extends React.Component {
  render() {
    return (
      <div>
        <OtherComponent props = "test" />
      </div>
    );
  }
}