0

So, I am trying to export this function to my main React App.js folder but it works only when the function name is in Uppercase. This is very strange since I have never encountered this behavior. This is the code that does not work:

export const family = () => {
  return <p>gfdgdfgfdgdfgdf</p>;
};

import import { family } from "./PersonInfo/PersonInfo.js";

//in my class component in App.js I am using this JSX: <family/>

However, when I try this code, it works:

export const Family = () => {
  return <p>dfgfdgfdgdf</p>;
};

import { Family } from "./PersonInfo/PersonInfo.js";

//in my class component in App.js I am using this JSX: <Family/>

What is wrong with using a lower case?

Miloš Leng
  • 101
  • 1
  • 10

1 Answers1

1

This is because user-defined components must be capitalized. https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

Edit: Your question is actually related to ReactJS component names must begin with capital letters?

kmhigashioka
  • 521
  • 5
  • 14
  • Ah, I was not aware of that. I have been until now using only default components and it functioned well with lower case. Thanks! – Miloš Leng Mar 03 '21 at 14:55