Appending React Components to Elements outside of JSX?

Question

I have this React Component:

import React, { useEffect } from 'react'
import styles from './_PhotoCollage.module.scss'
import PhotoCard from '../PhotoCard'

const PhotoCollage = ({ author }) => {
  let i = 1
  useEffect(() => {
    author.posts.forEach(post => {
      document.getElementById(`collage-${i}`).appendChild(<PhotoCard/>)
      i++
      if (i > 4) i = 1
    })
  }, [])

  return (
    <div className={styles.photoCollage}>
      <div className={styles.col} id="collage-1"/>
      <div className={styles.col} id="collage-2"/>
      <div className={styles.col} id="collage-3"/>
      <div className={styles.col} id="collage-4"/>
    </div>
  )
}

export default PhotoCollage

appendChild() doesn't like this at all.

I could easily create four loops inside each <div className={styles.col} id="collage-X"/> but I'd like to find a way to do this with one loop as it looks cleaner and I imagine will be more optimal/faster.

Is there a way to append React Components to specific elements using the DOM?

Answer 1

With React you can do something like:

const PhotoCard = ({ id }) => <div>Photo-{id}</div>;

const PhotoCollage = () => {
  return (
    <div>
      {[...Array(5).keys()].map(key => (
        <div key={key} id={`collage-${key}`}>
          <PhotoCard id={key} />
        </div>
      ))}
    </div>
  );
};