CODEWITHSUNDEEP
javascriptreactjs
blocboyx
blocboyx

Reputation: 63

Rendering a component inside another component not working

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;

Upvotes: -1

Views: 370

Answers (2)

Drashti Kheni
Drashti Kheni

Reputation: 1140

React component name must start with capital letter.

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

Upvotes: 2

Cerbrus
Cerbrus

Reputation: 72957

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/>

Upvotes: 1

Related Questions