Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Hello I have a code that is compiling but my title and paragraph are not showing

import React, { component} from 'react';
class Hello extends component{
    render(){
        return <div>
             <h1>Hello World</h1>
             <p>Welcome to React</p>
        </div>
    }
}
export default Hello;
the code works but it doesnt return anything besides a blank page

——————————–this is from the index.js file

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import Hello from './Hello'; import reportWebVitals from './reportWebVitals';  const root = ReactDOM.createRoot(document.getElementById('root')); root.render(   <React.StrictMode>   <h1> Hello World</h1>     <Hello/>   </React.StrictMode> )
Tags:

2

Answers


  1. 0

    Should be Component instead of component.

    import React, { Component } from 'react';

class Hello extends Component {
    render() {
        return (
            <div>
                <h1>Hello World</h1>
                <p>Welcome to React</p>
            </div>
        );
    }
}

export default Hello;

    And make sure your index.js same same like this

    import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';

ReactDOM.render(<Hello />, document.getElementById('root'));
    Login or Signup to reply.
  2. 0

    Incorrect Import of Component: You are importing component instead of Component from React. This will cause your Hello component to not work as expected because it doesn’t extend the correct class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search