React+Typescriptでコンポーネント表示できない（データインポート利用）

Question

前提・実現したいこと

React+Typescriptの練習でテンプレートをApp.tsxに当てようとしています。
JSでの作成経験はあるのですが、tsxと違う箇所がいまいちわからず混乱中です。。。
create-react-app <app名> --typescriptで作り、
別途「Devices.tsx」（テンプレート）を作ってデータを表示しようとしていますがうまく行きません。

発生している問題・エラーメッセージ

JSX element type 'Devices' does not have any construct or call signatures.

該当のソースコード

import * as React from 'react';
interface  DevicesProps{
    varName:string,
    name:string,
    dsc?:string,
    price?:string
}

const Devices:React.ReactNode = (DeviceList:DevicesProps) => {
    <>
    <a href="#" className={DeviceList.varName}>
        <div className={`${DeviceList.varName}Bg`}>
           <div className={`${DeviceList.varName}Msg`}>
              <h1 className={`${DeviceList.varName}Title`}>{DeviceList.name}</h1>
              <p className={`${DeviceList.varName}Dsc`}>{DeviceList.dsc}</p>
              <p className={`${DeviceList.varName}Price`}>{DeviceList.price}</p>
              <div className={`${DeviceList.varName}Links`}>
                 <a >Learn more<i className="fas fa-chevron-right"/></a>
                 <a >Buy<i className="fas fa-chevron-right"/></a>
              </div>
           </div>
        </div>
    </a>
    </>
  };
  export default Devices;

import React from 'react';
import './App.scss';
import Devices from './Devices';

import {DTPhone} from '../../../appleclone/src/Assets/Data/List';

const App: React.FC = () => {
  return (
    <div className="App">
      This is test
      <Devices
        varName={DTPhone.varName}
        name={DTPhone.name}
        dsc={DTPhone.dsc}
        price={DTPhone.price}      
      />
    </div>
  );
}

export default App;

試したこと

・DevicesのTypeを当てていなかったので当てた
・mapで表示しようとしていましたが、{DTPhone.map(中略)}で書くと
mapがDTPhoneには無い（Undefined）と表示され使えず。
・App.tsx内にconstructorを以下のように書いてみようとしましたがエラーが発生したため断念；

 constructor(props: DevicesProps) {
    super(props);
    this.state = {DevicesProps:DevicesProps[]};
}

補足情報（FW/ツールのバージョンなど）

　　"@types/jest": "24.0.19",
"@types/node": "12.7.12",
"@types/react": "16.9.6",
"@types/react-dom": "16.9.2",
"node-sass": "^4.12.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-scripts": "3.2.0",
"typescript": "3.6.4"

js/jsxで作るときはMapが使えたのにうまく動かないので苦戦しています。
Typeの設定などの問題でしょうか？
他に情報が必要でしたらお知らせください。

Answer 1

こんにちは。
以下のように、 <> ・・・ </> を囲むのを {・・・} ではなく、丸カッコ (・・・) に修正してみるといかがでしょうか？

修正前：

const Devices:React.ReactNode = (DeviceList:DevicesProps) => {
    <>
    <a href="#" className={DeviceList.varName}>
        <div className={`${DeviceList.varName}Bg`}>
           <div className={`${DeviceList.varName}Msg`}>
              <h1 className={`${DeviceList.varName}Title`}>{DeviceList.name}</h1>
              <p className={`${DeviceList.varName}Dsc`}>{DeviceList.dsc}</p>
              <p className={`${DeviceList.varName}Price`}>{DeviceList.price}</p>
              <div className={`${DeviceList.varName}Links`}>
                 <a >Learn more<i className="fas fa-chevron-right"/></a>
                 <a >Buy<i className="fas fa-chevron-right"/></a>
              </div>
           </div>
        </div>
    </a>
    </>
  };

修正後：

const Devices:React.ReactNode = (DeviceList:DevicesProps) => (
    <>
    <a href="#" className={DeviceList.varName}>
        <div className={`${DeviceList.varName}Bg`}>
           <div className={`${DeviceList.varName}Msg`}>
              <h1 className={`${DeviceList.varName}Title`}>{DeviceList.name}</h1>
              <p className={`${DeviceList.varName}Dsc`}>{DeviceList.dsc}</p>
              <p className={`${DeviceList.varName}Price`}>{DeviceList.price}</p>
              <div className={`${DeviceList.varName}Links`}>
                 <a >Learn more<i className="fas fa-chevron-right"/></a>
                 <a >Buy<i className="fas fa-chevron-right"/></a>
              </div>
           </div>
        </div>
    </a>
    </>
  );

Comments

[Ochanomizu]

コメントありがとうございます！
やってみましたが改善されず。。。。
Devices.tsxにはエラーが出てないので、App.tsxの方のReturnを削って｛｝から（）にしてみましたがこれも効果がありませんでした。。。
Function型にしているのがいけないのでしょうか・・・？

[jun68ykt]

コメントありがとうございます。
私もそのあたり（TypeScript での Functional Component の最新かつ真っ当な書き方）を深く掘ってないので、トライ＆エラーを繰り返して頂く感じになってしまい恐縮ですが、

const Devices:React.ReactNode = (DeviceList:DevicesProps) => (
<>
　　・・・
</>
);

を、以下に修正ではいかがでしょうか？

const Devices: React.FC<DevicesProps> = (DeviceList) => (
<>
　　・・・
</>
);

[jun68ykt]

> Function型にしているのがいけないのでしょうか・・・？

Functional Component にしていること自体には問題ないような気がします。

[Ochanomizu]

const Devices: React.FC<DevicesProps> = (DeviceList) => (
<>
　　・・・
</>
);
にしたら動きました！！
ありがとうございます・・・！！

[jun68ykt]

以下の記事が参考になるかと思います。

https://qiita.com/Takepepe/items/0bbe4ab6ff4858a4e186#-winners (by@Takepepeさん）
> 結論からいうと、以下二つのどちらかの書き方が良さそうです。
>
>const MyComponentA: React.FunctionComponent<Props> = props => (<></>)
>const MyComponentB: React.FC<Props> = props => (<></>)

[jun68ykt]

どういたしまして。

> ・・・
> にしたら動きました！！

とのことでよかったです????