Nemožno vytvoriť prvok v reakčnej zložke dynamicky - reakcie

Nemôžem dynamicky vytvoriť komponentu React. Vidím prázdnu stránku bez chýb s nižším kódom.

1) Snažím sa vytvoriť prvok s názvom "PieChart"

2) Nižšie sú zobrazené dve chyby v konzole.

1. Warning: <PieChart /> is using incorrect casing. Use PascalCase for
React components, or lowercase for HTML elements.

2. Warning: The tag <PieChart/> is unrecognized in this browser. If you
meant to    render a React component, start its name with an
uppercase letter.

3) Im Už používam prípad Pascal "PieChart"

import PieChart from "../component/PieChart";
class App extends Component {

render() {
const GraphWidget = React.createElement("PieChart");
return (
<div>
{GraphWidget}

</div>
)
}


}


export default App;

odpovede:

Z dokumentáciu createElement:

Vytvoriť a vrátiť nový prvok React zdaného typu. Argument typu môže byť buď reťazec názvu značky (napríklad "div" alebo "span"), typ komponentu React (trieda alebo funkcia) alebo typ fragmentu React.

Pokúšate sa používať typ komponentu React preto nemôžete použiť reťazec, musíte priamo použiť triedu:

const GraphWidget = React.createElement(PieChart);

Ak je vaším cieľom mapovať reťazce na komponenty, môžete vytvoriť jednoduché mapovanie pomocou slovníka:

const components = {
PieChart: PieChart
...
};

const GraphWidget = React.createElement(components["PieChart"]);