Rendering a component inside another component not working

Question

I have a component called "contactList" and i want to render it inside of another component called "App" but it gives me an error that say "contactList is defined but never used no-unused-vars"

import React, { Component } from 'react';
import './App.css';

class contactList extends Component {
  render(){
    const people = [
      {name: "kester"},
      {name: "john"},
      {name: "mary"}
    ]

     return <ol>
      {people.map(person =>(
        <li key={person.name}>{person.name}</li>
      ))}
     </ol>
  }
}

class App extends Component {
  render(){
    return <div className='App'>
    <contactList/>
  </div>
      
    
  }
}

export default App;

react components should start with capital letter

gmoniava
– gmoniava

2022-09-02 08:30:37 +00:00
Commented Sep 2, 2022 at 8:30 — gmoniava
– gmoniava, Commented Sep 2, 2022 at 8:30

Drashti Kheni · Accepted Answer · 2022-09-02 08:33:26Z

2

React component name must start with capital letter.

So, you need to rename your conatctList component with ContactList.

answered Sep 2, 2022 at 8:33

Drashti Kheni

1,13910 silver badges30 bronze badges

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

Comments

Cerbrus · Accepted Answer · 2022-09-02 08:32:09Z

1

When running your code, I get the following error:

Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s
contactList

    at contactList
    at div
    at App (<anonymous>:51:11)

Rename your component to ContactList and update the usage to <ContactList/>

answered Sep 2, 2022 at 8:32

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Collectives™ on Stack Overflow

Rendering a component inside another component not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related