Reactjs:Cant see const rendered

Question

I have declared a const and also included in the render method of component but still cant find that in the rendered html.

The contents of first component are correctly getting rendered, but I am getting empty tag in the html.

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

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const abc =(props)=>(
  <h1>
    Hello, {formatName(user)}!
  </h1>)
;


class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <FirstComponent val="hello"/>
        <abc/>
      </div>
    );
  }
}




export default App;

Where am i going wrong with this?

I made abc as Abc and able to see the contents on html.(as per naming conventions of React Component)

But again , I can see below statement : const element = ; on https://reactjs.org/docs/introducing-jsx.html.

Is it like if it starts from a caps letter then will work fine , but if small then I have to explicitly add it using ReactDom.render.

PS:Sorry for such a navie question, but I am a react newbie.

I believe JSX has a convention in which lowercase tags are considered to be primitives, and so it's transformed into React.createElement('myHeader', ...) With uppercase JSX tags, it's transformed into React.createElement(MyHeader, ...) and this refers to the component. — Krina Soni, Mar 16 '18 at 06:57

score 0 · Answer 1 · answered Mar 16 '18 at 06:45

0

At a first glance, Looking at your code, below could be the issue. One of the important thing that we shouldnt forget is, user defined component names should always start with a capital letter. Or else React treats it as a normal html element and its functionality will not be rendered as expected.

Change your const abc to const Abc and render it using <Abc/> instead of <abc/> and check it

answered Mar 16 '18 at 06:45

G_S

7,068
2
21
51

https://stackoverflow.com/questions/48838937/component-wont-render-in-react/48839034#48839034 – G_S Mar 16 '18 at 06:52

Reactjs:Cant see const rendered

1 Answers1