score:0

I think that in the Hello you have to add a return. Remember that the default behaviour of a function is to return undefined

function Hello(){
    return f();    
}

function f(){
    return(<h1>hello</h1>);
}

score:0

You are not returning anything from the Hello component. You are calling the function f() but not doing anything useful with it. To make the function do something more useful you can do:

function Hello(){
    return f();    
}

score:1

Change

function Hello(){
    f();    
}

to

function Hello(){
    return f();    
}

Without the return keyword, Hello()'s return value is undefined.

score:1

You need to return from the function as

function Hello(){
 return f();    
}

or

const Hello = () => f(); // implicit return

Hope it helps

score:4

Functional Components must return React Components of some form

To elaborate on other answers, you should refer to the example in the React docs:

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element.

So, as others have said, your best bet is to return a React element (via JSX, presumably, but can call other components as you're trying):

// Using conventional function syntax
function Hello(){
    return f();    
}

// Using arrow functions and implicit returns
const Hello = () => f();

Related Query

More Query from same tag