0

My react application is giving no output, there are no errors. First it worked fine, now the same thing is not working.

I've tried React.render and ReactDOM.render I've tried with and without render()

App.js

import ReactDOM from 'react-dom';
import './index.css';

function Greeting()
{
  
    return
    (
      <h1>helllo</h1>
    );
  
}



ReactDOM.render
(
  <Greeting/>,document.getElementById('root')
);

--------------------------**Index.css**----------------------------------

    ```body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    code {
      font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
        monospace;
    }
Sunny
  • 235
  • 4
  • 17
Maryam Naveed
  • 99
  • 1
  • 11
  • Keep the bracket after the return statement on the same line. Else the JS compiler considers the `return` and the block in the brackets to be two different statements. So it takes `return;` as the output of the `Greeting` function – Karan Sapolia May 14 '21 at 08:36

2 Answers2

2

The problem is with return statement(line-break issue), if you return value in next line, it will be consider as undefined. that's why you can't see anything on dom. Read these answers for more understanding

return
    (
      <h1>helllo</h1>
    );

change to

 return (
   <h1>helllo</h1>
 );

Also format your code little bit.

ReactDOM.render(
  <Greeting/>,document.getElementById('root')
);
Naren
  • 4,152
  • 3
  • 17
  • 28
0

Your syntax is wrong, in a functional component you only need to return the JSX/JS, class based component need render Difference b/w class and functional component

The correct working code can be found below.

import ReactDOM from "react-dom";
import "./index.css";

function Greeting() {
  return <h1>helllo</h1>;
}

ReactDOM.render(<Greeting />, document.getElementById("root"));
Sunny
  • 235
  • 4
  • 17