Cannot create an element in react component dynamically

Question

Im not able to create a React component dynamically. I see blank page with no errors with below code.

1) Trying to create an element named "PieChart"

2) Below are the Two errors im seeing in console.

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 Already using Pascal case "PieChart"

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

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

      </div>
    )
  }


}


export default App;

Answer 1

From the createElement documentation:

Create and return a new React element of the given type. The type argument can be either a tag name string (such as 'div' or 'span'), a React component type (a class or a function), or a React fragment type.

You are trying to use a React component type therefore you cannot use a string, you need to use the class directly:

const GraphWidget = React.createElement(PieChart);

If your aim is to map strings to components, you can create simple mapping using a dictionary:

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

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

Answer 2

You should user **PascalCase** Naming conventions.

For Example,

class StudentGrades extends Component{

 // Your Stuff

}