CODEWITHSUNDEEP
javascriptreactjs
Alon Joshua
Alon Joshua

Reputation: 75

Component not shown in the application

I'm trying to build basic app in react, and I don't understand why I can't see the info of one component (called instructions) in the DOM. Anyone for help?

App.js:

import React from "react";
import ReactDOM from "react-dom";
import instructions from "./components/instructions/instructions"

class Generator extends React.Component {

  render() {
  return (
    <div className="App">
    <div className="gen-button">
    <instructions />
    <button type="button">generate</button>
      </div>
      <div className="random-number"> 
      <p>0</p>
      </div>
    </div>
    );
  }
}

export default Generator;

And instructions component:

import React from "react";

const instructions = () => {

    return (
        <div>
        <p>Click "generate" for a random number"</p>
        </div>
        );
}

export default instructions;

Upvotes: 1

Views: 143

Answers (3)

BertC
BertC

Reputation: 2666

Components should start with a Capital. If you change 'instructions' to 'Instructions' it works.

See the code below (in an empty React-App) App.js

import React from 'react';
import './App.css';

const aaa = () => {
    return (
        <p>This is from 'aaa' component</p>
    )
}

const Bbb = () => {
    return (
        <p>This is from 'Bbb' component</p>
    )
}

const App = () => {
  return (
    <React.Fragment>
      <aaa/>
      <Bbb/>
    </React.Fragment>
  );
}

export default App;

The output is: 

This is from 'Bbb' component

Upvotes: 0

Srimoyee Sen
Srimoyee Sen

Reputation: 191

Please change your <instructions/> component to <Instructions/> , as per the JSX convention, only Capital is taken to consideration

Upvotes: 1

Mike Donkers
Mike Donkers

Reputation: 3699

At a first glance, everything seemed correct. However, after doing a double take I noticed that your <instructions/> component does not start with a capital letter, which is something that React expects of custom components...

As noted here

the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).

So if you change the <instructions/> to be <Instructions /> (in the import, the call, the export and the creation) it will work as expected.

Please check this demo

Hope this helps!

Upvotes: 3

Related Questions