Design Question With Looped Components

Good morning.

This is a section of my code in my App,js file:

Screenshot 2022-06-03 113013

I first tried to put the h1 element within the <Certification /> component, however this would repeat the h1 element that I have as a title, and I obviously don’t want that.

After putting the h1 element above my <Certifications /> declaration, this would later mess up the CSS and I would need to put things that are not just the components in my App.js file, which is something else I don’t want to do.

What is the best way to solve this?

Thank you.

I don’t think I understand the question or the problem you seem to be having. Can you post a live demo and explain the problem you are having.

Does the h1 not belong to the parent component for the mapped Certifications component?

You are going to have to explain this some more.

Sure, let me create a simple example real quick. Thank you for your help!

Here is the link, thank you for your patience.

Well, you don’t want the title repeated for each component, then don’t put it in the certifications component. That’s what you’ve said, and that’s clear enough, seems completely sensible.

What doesn’t seem sensible is this:

So are you not allowed to change the CSS, or add CSS, or add classes or basically anything CSS-related???

What do you mean “things that are not components”? That <h1> in the JSX, that’s a component. The text in the <h1>, that’s also a component.

There isn’t some magic way you get to put DOM elements into the DOM without putting DOM elements into the DOM.

At the minute, from your description of the problem you seem to need an <h1> element with a title above your list. To get an <h1> element with a title above your list, you have to tell React you want to render an <h1> element with a title above your list. It won’t happen unless you tell it to do that.

1 Like

But code is magical uwu

Haha, thank you!

I would suggest you move the mapping inside each of the components. If you still want a dedicated list component for the mapping you can create one (a generic or specific to each component).

Not sure where the data is coming from (I assume it will be a fetch) but if you want/need it in App you can pass it down to the component(s). Or you can co-locate the data to the components if the data is specific to the components (that is move the data/fetch to the components that need it for the mapping).

But without knowing the exact use case it’s hard to suggest anything.