Newby Tutorial: React.js is not rendering Function Component-CodePudding

I'm trying out very basic tutorial, but cannot make the function component to render. Would appreciate some help.

The following works fine:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

const rightCol = <h1>This is the Right Column</h1>
const leftCol = <h1>This is the Left Column</h1>

const showInfo = ReactDOM.createRoot(document.getElementById('showInfo'));
showInfo.render(leftCol);

const showBalls = ReactDOM.createRoot(document.getElementById('showBalls'));
showBalls.render(rightCol);

But, if I try with a function, it doesn't work:

const leftCol = () => {
  return (<h1>This is the Left Column</h1>);
}
    
const showInfo = ReactDOM.createRoot(document.getElementById('showInfo'));
showInfo.render(leftCol);

function leftCol() {
  return (<h1>This is the Left Column</h1>);
}
    
const showInfo = ReactDOM.createRoot(document.getElementById('showInfo'));
showInfo.render(<leftCol />);

CodePudding user response：

You must start this name of the functional component is uppercase!!!

Try LeftCol will work well.

CodePudding user response：

Because leftCol is a function so you must call it with parentheses. Try this:

showInfo.render(leftCol());