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.
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.
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.
