External React components are not rendering in App.js

Question

I am very new to react.js. When I was working on a practice project, I encountered this strange error. Some components from an external js file render when imported and some do not.

app.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Hello from './components/hello'
import functionalClick from './components/fuctionalClick'

class App extends Component {
  render() {
    return (
      <div className="App">

        <Hello name='Lol   '></Hello>

        <functionalClick></functionalClick>
      </div>
    );
  }
}

export default App;

functionalClick.js:

import React from 'react'

function fuctionalClick() {
    return (
        <div>
            <button>Click</button>
        </div>
    )
}

export default fuctionalClick

hello.js:

import React from 'react';
const Hello = (props) => {
    return (
        <div>
            <h1>
                Hello {props.name}!
            </h1>
        </div>
    );
}

export default Hello;

The functionalClick.js does not render But the first method does(hello.js). Even when the syntax i followed, was almost same.enter image description here

Answer 1

As per the docs User-Defined Components Must Be Capitalized

React also shows some warnings when you try to use not HTML tags in lowercase.

Warning: is using uppercase HTML. Always use lowercase HTML tags in React.

Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Check the warnings here: https://codesandbox.io/s/react-example-exw9h

Answer 2

I think you might have a typo in the declaration of the function fuctionalClick. Looks like you're missing an n after the c. Your Component might be imported as undefined. Check your browser console for other info.

Try changing this:

import functionalClick from './components/fuctionalClick'

and this:

<functionalClick></functionalClick>

To this:

import fuctionalClick from './components/fuctionalClick'

and this:

<fuctionalClick></fuctionalClick>

And see if that helps.

Answer 3

In your question typo mistakes but sometimes also not work then check your components name first later. if it is small then do it capital.