How to build a generic list component in React

Question

Im building a user profile which renders 4 lists:

1. reviews
2. saved posts.
3. created posts
4. active posts.

2-4 are lists rendering the same component and 1 is a a list that renders a different component - ReviewCard.

As far as I know, there's some way to make a generic component to render a list of components by type or something of the sort. Each list also has it's own states and additional sub-components like for example star container in reviews which doesnt exists in the others. Right now my code is extremely messy:

    useEffect(() => {
        if (type === 'reviews') {
            fetchReviews()
        }
        dispatch(fetchNewRoom())
    }, [])

    useEffect(() => {
        setInitialMessages(messages?.slice(0, 3))
    }, [messages])

    useEffect(() => {
        setInitialRooms(rooms?.slice(0, 3))
    }, [rooms])

where rooms, reviews and messages are 3 lists that i want to render on profile. im sure there's a better practice for that. Would be great to discuss ideas. Thanks for helping out

Answer 1

In your use-case, there are four list which could be rendered inside a container, where container will have list and common config. In case if there is config which is not constant then pass props and handle it accordingly. Below is the code snippet.

//Below is the list container

const ListContainer = (props) => {
  const { listData } = props
  const getListItem = (type) => {
       switch(type) {
         case 'review':
            return <review/>
         case 'spost'
            return <spost/>
         case 'cpost'
            return <cpost/>
         case 'apost'
            return <apost/>
         default:
            return null;
       }
  }
  return (
      <div>
        {listData.map((item) => { 
            return getListItem(item.type)
        })}
      </div>
  )
}

//This is the profile component where we you can render 4 list simultaneously.

import ListContainer from './listContainer'

    const Profile = () => {
      return (
         <ListContainer type="review" />
         <ListContainer type="spost" />
         <ListContainer type="cpost" />
         <ListContainer type="apost" />
      )
    }