Why react render accepts a block and return doesn't?

Question

I'm learning React JS, and facing a problem with JSX. I have a component :

The below code works fine:

import React from "react";

function Hello() {
  return(<h1> Hello ! </h1>);
}

export default Hello;

However, this doesn't work:

import React from "react";

function Hello() {
  return(){
  <h1> Hello ! </h1>
  };
}

export default Hello;

As I am trying to use a block in return, Why does render(){} accepts a block and return does not?

Answer 1

You are using a functional-based component you can't define a render function inside this works only on class-based components

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