Can't use the function after importing a single default import function in React.js-CodePudding

I can't use a default imported funtion from a file. I've tried importing this file from same dir and tried to import it from it's child dir. Here is the code for the parent function (who is importing the function from child). Ultmately this function is exporting itself to App.js in a React page.

import React from 'react'
import {cardPanels} from './subComponents/cardPanels.js'

function Cards() {
    return (
            <>
            <cardPanels/>
            </>
    );
}
export default Cards

Here is the code for child function which is exporting the function.

import React from 'react'
import Card from 'react-bootstrap/Card'


export const cardPanels = () => {
    return (
        <div>
      <Card style={{ width: '18rem' }}>
      <Card.Body>
        <Card.Title>hello</Card.Title>
        <Card.Text>
          ok working
        </Card.Text>
        <Card.Link href="#">card</Card.Link>
              </Card.Body>
            </Card>
            </div>
    );

}

CodePudding user response：

This will work

import Card from 'react-bootstrap/Card'

const CardPanels = () => {
    return (
        <div>
          <Card style={{ width: '18rem' }}>
          <Card.Body>
            <Card.Title>hello</Card.Title>
            <Card.Text>
              ok working
            </Card.Text>
            <Card.Link href="#">card</Card.Link>
          </Card.Body>
          </Card>
        </div>
    );

}
export default CardPanels;

CodePudding user response：

Components should be Pascal Case as well e.g CardPanels I think problem is related to naming. after I renamed to CardPanels, it worked