The component names should start with a uppercase letter but there are few exceptions on this convention. The lowercase tag names with a dot (property accessors) are still considered as valid component names. You can define component class which name starts with lowercase letter, but when it's imported it should have capital letter. Here lowercase is fine: If you are rendering your component using JSX, the name of that component has to begin with a capital letter otherwise React will throw an error as unrecognized tag. This convention is because only HTML elements and SVG tags can begin with a lowercase letter.
let fLCapital = s => s = s.charAt(0).toUpperCase() + s.slice(1);
fLCapital('this is a test') // "This is a test"class SomeComponent extends Component { // Code goes here}class myComponent extends Component { render() { return <div />; }}
export default myComponent;render(){ return ( <obj.component /> // `React.createElement(obj.component)` )}All React component names must start with a capital letter. If you start a component name with a lowercase letter, it will be treated like a built-in element like a <div> or a <span>. This is because of the way JSX works. This problem is easily avoided by beginning all component names with a capital letter. Here’s an example that provides the correct output: But it doesn’t. React throws up an error with a message that says “Adjacent JSX elements must be wrapped in an enclosing tag“. This is because you cannot return multiple elements from a React component without wrapping them in something.
Let’s say you want to render multiple elements from a React component’s render function, you might think that the following code sample below should just work:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
);
}
}
export default App;
Before React 16, the common way to solve the problem was to enclose the adjacent JSX elements inside a wrapper tag, usually a div.
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
And it totally works. But many people do not like this solution because it adds extra markup to the output of the component which is undesirable in many cases.
So the React developers made it possible to return an array of elements in React 16, which enabled developers to skip the wrapper tag:
import React, { Component } from "react";
class App extends Component {
render() {
return [
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>,
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
];
}
}
export default App;
In JSX, rendering a component that begins with a lowercase letter compiles down to React.createElement('component'), the equivalent of an HTML element. For example, let’s say you have a button component that returns a simple button element, this will not work as expected.
import React, { Component } from "react";
import ReactDOM from "react-dom";
class button extends Component {
render() {
return <button className="App-button">Yo!</button>;
}
}
ReactDOM.render(<button />, document.getElementById("root"));
import React, { Component } from "react";
import ReactDOM from "react-dom";
class Button extends Component {
render() {
return <button className="App-button">Yo!</button>;
}
}
ReactDOM.render(<Button />, document.getElementById("root"));
You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop: When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file. Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo /> expression, Foo must be in scope.
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>React.createElement(
MyButton, {
color: 'blue',
shadowSize: 2
},
'Click Me'
)<div className="sidebar" />import React from 'react';import CustomButton from './CustomButton';
function WarningButton() {
// return React.createElement(CustomButton, {color: 'red'}, null); return <CustomButton color="red" />;
}import React from 'react';
const MyComponents = {
DatePicker: function DatePicker(props) {
return <div>Imagine a {props.color} datepicker here.</div>;
}
}
function BlueDatePicker() {
return <MyComponents.DatePicker color="blue" />;}The getTag function will return a string literal(e.g. “div”, “foo” if used as <foo />) if the tagName starts with a lowercase letter(i.e. /^[a-z]/). So, if <Foo /> is used, the result will be: In this article, we will investigate why component identifiers must be capitalized in React In this short article, I’d like to share some findings as to why a component must be used as <Foo />(capitalized), as opposed to <foo />. It may not occur very often(may not even be recommended), but if you import a component like import foo from './Foo' and use it as <foo />, React will not be happy with that:
< > Copy {
type: "Identifier",
start: 165,
end: 168,
name: "Foo",
/* ... */
}and, on the other hand, if <foo /> is used:
< > Copy {
type: "StringLiteral",
value: 'foo',
}With this article, we’ll look at some examples of React Hook “Usestate” Is Called In Function “App” That Is Neither A React Function Component Nor A Custom React Hook Function. React Component Names Must Start With An Uppercase Letter problems in programming. React Hook “Usestate” Is Called In Function “App” That Is Neither A React Function Component Nor A Custom React Hook Function. React Component Names Must Start With An Uppercase Letter With Code Examples Below is a list of different approaches that can be taken to solve the React Hook “Usestate” Is Called In Function “App” That Is Neither A React Function Component Nor A Custom React Hook Function. React Component Names Must Start With An Uppercase Letter problem.
//Try to capitalize 'app' like
const App = props => {
...
}
export default App;// this error is seen because your function might be in Lowercase so.
// use proper rule for declearing your FUnction in React .
// Always use Pascal convention for for react components.
const App = ()=>{
...
<div> this will solve your problems...</div>When creating a React component, the component's name MUST start with an upper case letter. A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component's functions. A Function component also returns HTML, and behaves much the same way as a Class component, but Function components can be written using much less code, are easier to understand, and will be preferred in this tutorial.
Create a Class component called Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Create a Function component called Car
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
Display the Car component in the "root" element:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Car />);Use the Car component inside the Garage component:
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
This is the new file, we named it "Car.js":
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;