Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React – component content not pulling through

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?

Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    in addition to adding the return statement , you should also add the import statement in parent to import child

    import Child from 'drectoryname'
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search