Need help with Create a component with composition - React

Need help with Create a component with composition - React
0.0 0

#1

Challenge: https://learn.freecodecamp.org/front-end-libraries/react/create-a-component-with-composition
I got stuck in a challenge at the path of learning React. That’s I wasn’t expecting.
Please give me the solution to this challenge. I tried to solve this challenge many times. But failed to succeed. Please help me to solve this challenge.

The code I tried-

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* change code below this line */ }
        {ChildComponent()}
        { /* change code above this line */ }
      </div>
    );
  }
};

#2

You need to post some code for us to see exactly what you have tried so far.

To post your code into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

I’ve updated the question with the code I tried. Please check it again.
Thanks for your suggestions :slight_smile:


#4

While I understand you might think what you have written below will work, you are not making use of the way React can render components. In this challenge ChildComponent is a functional component, so it can be called in the render as if it was a self-closing html element.

        { /* change code below this line */ }
        {ChildComponent()}
        { /* change code above this line */ }

Below, I will give you an example of another functional component and how you would call it in a render method.

const AnotherChildComponent = () => {
  return (
    <div>
      <p>I am another child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        <AnotherChildComponent />
      </div>
    );
  }
};

#5

Thank you very much for your reply. I have understood the fact.
I have to include the component name written as a custom HTML tag in the JSX to render a component.

Regards