React complement not being read

Question

Im begining to learn react and i having problems importing a complement. It does not show on the app nor shows any error. This is the complement code:

import "bootstrap/dist/css/bootstrap.css";

const cardComponent = () => {
  return (
    <div className="card">
      <img className="card-img-top" src="..." alt="Card image cap" />
      <div className="card-body">
        <h5 className="card-title">Card title</h5>
        <p className="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" className="btn btn-primary">
          Go somewhere
        </a>
      </div>
    </div>
  );
};

export default cardComponent;

And the app code is this:

import "./App.css";
import cardComponent from "./component/cardComponent";

const App = () => {
  return (
    <div className="App">
      <cardComponent />
    </div>
  );
};

export default App;

Any tip would be apreciated

React component should be named starting with Capital Character. ex) `CardComponent` — kyun, Aug 27 '21 at 01:56
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized — Jayce444, Aug 27 '21 at 01:58

score 2 · Accepted Answer · edited Aug 27 '21 at 10:37

Let me try to give you some tips:

Always start with:

   import React from 'react';

put the first sentence in capital like this:

 const CardComponent = () => {
  return (
   .
   .
   .

   export default CardComponent;

And in the App page you just import like this:

import CardComponent from './components/molecules/Card';

 const App = () => {
 return (
  <div className="App">
   <CardComponent />
  </div>
  );
 };
export default App;

I learned react with Typescript, so some it makes easier to avoid some issues, if you feel like it, I would advise to learn them together.

Ruso701 · Answer 2 · 2021-08-28T19:36:02.933

0

This post solved the issue ReactJS component names must begin with capital letters? the error was not naming the compononent with initial capital letter

As was said in the answer to this post and this answer given in the post mentioned before. React (jsx files) distinguishes tags between proper react components and html by their first letter (if it its capital it reads as a React component so:

<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)

also

<obj.component /> compiles to React.createElement(obj.component)

edited Aug 28 '21 at 19:36

answered Aug 27 '21 at 02:07

Ruso701

23
4

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes – cursorrux Aug 27 '21 at 05:27
Please add further details to expand on your answer, such as working code or documentation citations. – Community Aug 27 '21 at 05:27
thx for suggestions, the post was edited acording to them – Ruso701 Aug 28 '21 at 19:39

React complement not being read

2 Answers2