Typescript react import 出来ない??

Question

下記コードのように時刻によって表示される挨拶を変更するのが目的です。
ですが、エラーはないのに上手く表示されません。(exportが上手くいっていない？？)

初学者のためどなたかアドバイス頂ければと思います。
宜しくお願い致します。

[component化したつもり↓]

import React from 'react';

const hour = new Date().getHours();

const GreetInTheMorning = () => {
  return <h1>おはようございます。</h1>
}
const GreetInTheAfternoon = () => {
  return <h1>こんにちは。</h1>
}
const GreetInTheEvening = () => {
  return <h1>こんばんは。</h1>
}

const Greeting = () => {
  // 5時 ~ 12時までは"おはようございます。"を表示する
  if(5 <= hour && hour < 12) {
    return <GreetInTheMorning />
  }
  // 12時 ~ 18時までは"こんにちは。"を表示する
  else if(12 <= hour && hour < 18) {
    return <GreetInTheAfternoon />
  }
  // 18時 ~ 5時までは"こんばんは。"を表示する
  else if((18 <= hour && hour < 24)  || (0 <= hour && hour < 5) ) {
    return <GreetInTheEvening />
  }
} 

export default Greeting;

[表示先]

import Image from 'next/image';
import Link from '@components/ui/link';
import cn from 'classnames';
import { siteSettings } from '@settings/site-settings';
import Greeting from '@components/greeting';

const Logo: React.FC<React.AnchorHTMLAttributes<{}>> = ({
  className,
  href = siteSettings.logo.href,
  ...props
}) => {
  return (
    <Link
      href={href}
      className={cn('inline-flex focus:outline-none', className)}
      {...props}
    >
      <div>
        <span className="block pb-2 ml-2 whitespace-no-wrap overflow-x-auto">{Greeting}へのへのもへじ様</span>
      <div className="flex items-center w-[200px]">
          
        </div>
      </div>
    </Link>
  );
};

export default Logo;

Comments

[maisumakun]

> 上手く表示されません。

何が表示されて、どこまでが表示されない状況でしょうか。

[3939TJ55]

へのへのもへじ様まで表示される状態です。

[3939TJ55]

maisumakun様
表示はされたのですが、次は下記が。。。

(alias) const Greeting: () => JSX.Element | undefined
import Greeting
'Greeting' を JSX コンポーネントとして使用することはできません。
その戻り値の型 'Element | undefined' は、有効な JSX 要素ではありません。
型 'undefined' を型 'Element | null' に割り当てることはできません。

[maisumakun]

エラーメッセージのとおりです。関数コンポーネントがundefinedを返してはいけません。

Answer 1

<span className="中略">{Greeting}へのへのもへじ様</span>

コンポーネントを表示する場合は<Greeting />とタグ形式で書く必要があります。

Comments

[3939TJ55]

maisumakun様
表示はされたのですが、次は下記が。。。

(alias) const Greeting: () => JSX.Element | undefined
import Greeting
'Greeting' を JSX コンポーネントとして使用することはできません。
その戻り値の型 'Element | undefined' は、有効な JSX 要素ではありません。
型 'undefined' を型 'Element | null' に割り当てることはできません。

[maisumakun]

エラーメッセージのとおりです。関数コンポーネントがundefinedを返してはいけません（TypeScriptコンパイラは、hourが0～23のいずれかであるということは判断できません）。

[3939TJ55]

調べてみたのですが???
[Greetingで時刻によって出力させる文章を変更]→[それを表示先に渡す]→[画面に表示]
未定義のエラーということは定義すれば良い？ということですか

[maisumakun]

> 未定義のエラーということは定義すれば良い？ということですか

違います。Greetingの関数で、どのifにも当てはまらなかった場合を考えないといけません（人間にはないと判別できますが、TypeScriptコンパイラは把握できません）。

[3939TJ55]

maisumakun様
仰る通りelseを設定したら、エラーが無くなりました！！！ありがとうございます！

maisumakun様の過去の回答など拝見させて頂き理解を深めたいと思います。
また、お時間ありましたらご相談させて下さい。