Функции внутри функций в React

Хоть в React используют компоненты, которые представляют собой функции, но внутри них тоже можно создавать другие функции. Приведём пример такой простейшей вложенной функции:

function App() {
   function joinText(begin, end){
      return begin + " " + end;
   }
   const text = joinText('Тише, мыши, ', 'кот на крыше!');

   return <div>
      {text}
   </div>;
}

Функция App с таким кодом внутри вернёт строку "Тише, мыши, кот на крыше!".

Пример можно сократить, потому что в JSX синтаксисе, в фигурных скобках, можно вызывать функции (даже несколько подряд). Получится так:

function App() {
   function joinText(begin, end){
      return begin + " " + end;
   }

   return <div>
      {joinText('Тише,', 'мыши,') + joinText('кот на', ' крыше!')}
   </div>;
}

Не стоит забывать, что у вложенных функций есть своя область видимости.