JSX 元素类型“字符串”不是 JSX 元素的构造函数 function。 Typescript

Question

So i have been working on a reusable icon element that I can call in any class and just pass a string <Icon name="chat" /> that contain the specific colour of the icon.. This error is the result of the previous question I raised.. you can find the link below

I raised a question early before this:

icon.ts file

const iconsList = {
    heart: '',
    star: '',
    like: '',
    dislike: '',
    flash: '',
    marker: '',
    filter: '',
    user: '',
    circle: '',
    hashtag: '',
    calendar: '',
    chevronLeft: '',
    optionsV: '',
    optionsH: '',
    chat: '',
    explore: ''
};

interface Props{
    name: keyof typeof iconsList;
}

const Icon = ({name }: Props) => {
    let icon = iconsList[name];
    icon = icon.substr(3);
    icon = String.fromCharCode(parseInt(icon, 16));

    return icon;
 };

export default Icon;

profile.tsx

import React from 'react';
import styles from '../assets/styles';

import {
  ScrollView,
  View,
  Text,
  ImageBackground,
  TouchableOpacity
} from 'react-native';
import Icon from '../components/Icon';
const Profile = () => {
return (

<TouchableOpacity>
  <Text style={styles.topIconLeft}>
    <Icon name="chevronLeft" />
  </Text>
</TouchableOpacity>

);
}

This line of <Icon name="chevronLeft" /> complains with an error of "JSX element type 'string' is not a constructor function for JSX elements.ts(2605)

Screenshot:

Answer 1

string is not a valid return value for a react component. A react component always has to return a ReactDOM element or a Fragment , that implements the render method. You can try

const Icon : React.SFC<Props> = ({name }: Props) => {
    let icon = iconsList[name];
    icon = icon.substr(3);
    icon = String.fromCharCode(parseInt(icon, 16));

    return <>{icon}</>;
 };

And actually it won't hurt if you renamed icon.ts to icon.tsx . Depending on your compiler settings the <>{icon}</> part might not get recognized correctly as JSX markup.