How to implement custom components in React?

Question

I've created a simple test program in React which displays a piece of text.

import React from 'react';
import componentClass from './components/componentClass';

export default function App () {

    return (
      <h1>example</h1>
    )
  }

What I'm trying to do now is take this example text and make it its own separate component. I've created a class component named componentClass where the example text is displayed.

import React, { Component } from 'react';

export default class componentClass extends Component {

  render() {
    return (
      <h1>example</h1>
    )
  }
}

I'm then rendering this component in App.js.

import React from 'react';
import componentClass from './components/componentClass';

export default function App () {

  return (
    <componentClass />
  )
}

The problem is that nothing is showing up so I'm confused as to why the component isn't being displayed. Below is my index.js file.

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

Dobrin Tinchev · Accepted Answer · 2021-08-10 18:38:26Z

3

You should be using PascalCase when naming React components

working fiddle

class ComponentClass extends React.Component {

  render() {
    return (
      <h1>Component class</h1>
    )
  }
}

function App () {
  return (
    <ComponentClass />
  )
}
  
ReactDOM.render(<App />, document.querySelector("#app"))

answered Aug 10, 2021 at 18:38

Dobrin Tinchev

4014 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahmoud Ali · Accepted Answer · 2021-08-10 18:38:19Z

1

In React, ALl components should have the first letter capitalized which means you need to edit each time you mentioned componentClass and turn it into ComponentClass

answered Aug 10, 2021 at 18:38

Mahmoud Ali

1562 gold badges3 silver badges10 bronze badges

1 Comment

Josh Susa Over a year ago

I see, I'm so used to camel case that I never thought to use pascal case

Mahmoud Ali · Accepted Answer · 2021-08-10 18:39:26Z

0

Try wrapping your return in a react fragment like so:

 return (
   <>
    <ComponentClass />
   </>
  )

edited Aug 10, 2021 at 18:39

answered Aug 10, 2021 at 18:30

Mahmoud Ali

1562 gold badges3 silver badges10 bronze badges

1 Comment

Josh Susa Over a year ago

No, it still doesn't display.

Collectives™ on Stack Overflow

How to implement custom components in React?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related