React - component content not pulling through

Question

I'll admit I'm relatively new to React but I'm simply trying to pull through content from a Child component to the parent App component but it's not pulling in the content and I can't figure out why.

As the console.log I've added to the Child Component is working fine so it's definitely linked up but it's not building the simple JSX tag I've added to display:

App Component:

import React from 'react';

const App = () => {
  return (
        <div className="ParentApp">
            <Child />
        </div>
    );
}

export default App;

Child Component:

import React from "react";
import Child from "./Child"

const Child = () => {
    console.log("Child component loaded");

    <div className="child">
        <h2>Child Component</h2>
    </div>
};

export default Child;

and that's it. I've built the React app in VScode Terminal with: npx create-react-app app-name and got the dependencies with npm i, so nothing fancy but I still can't figure out why it's not displaying content.

Any help please on what I'm doing wrong?

Answer 1

You are not returning your JSX in the child component.

Use the following, note the return:

import React from "react";

const Child = () => {
    console.log("Child component loaded");
    
    return (
        <div className="child">
            <h2>Child Component</h2>
        </div>
    );
};

export default Child;