How can I reuse a piece of HTML as a component and pass it to multiple components?

Question

I want to ask for a way to create a component, and from that Component, I can use it as a child component for multiple other Components to use.

In my case:

I have set up a route like this in App.js , it's very simple

        <Routes>
            <Route exact path="/" element={<Newest />} />
            <Route path="/movies" element={<Movies />} />
            <Route path="/tv" element={<TvShows />} />
            <Route path="/series" element={<Series />} />
            <Route path="/cartoons" element={<Cartoons />} />
        </Routes>

From then, I create 5 other components: Newest , Movies , TvShows , Series , Cartoon

As I see from my code, there's a piece of JSX that I've always used, for example

This is my Newest component:

import { useState, useEffect } from "react"
import axios from "axios"
import { SITE_API } from "../../constants/constants"

function Newest() {
    const [newestData, setNewestData] = useState([])
    const newestUrl = `${SITE_API}/update-film`

    useEffect(() => {
        const CancelToken = axios.CancelToken
        const source = CancelToken.source()

        axios
            .get(newestUrl, { cancelToken: source.token })
            .then((data) => {
                setNewestData(data.data.data.items)
            })
            .catch((thrown) => {
                if (axios.isCancel(thrown)) return
            })
    }, [])

    return (
        <>
            <h2>NEWEST</h2>
            <div className="holder-item">
                {newestData.map((item, i) => {
                    return (
                        <div className="item" key={i}>
                            <img
                                src={`shorten-URL-that-I-use{item.thumb_url}`}
                                alt=""
                            />
                            <h3>{item.name}</h3>
                        </div>
                    )
                })}
            </div>
        </>
    )
}

export default Newest

There's a whole "holder-item" section that I can reuse for 4 Components left.

I tried to create a component called ItemCard and paste that whole section inside of it, it's like this:

import React from "react"

function ItemCard({ newestData }) {
    console.log(newestData)

    return (
        <>
            {newestData.map((item, i) => {
                return (
                    <div className="item" key={i}>
                        <img
                            src={`shorten-URL-that-I-use${item.thumb_url}`}
                            alt=""
                        />
                        <h3>{item.name}</h3>
                    </div>
                )
            })}
        </>
    )
}

export default ItemCard

And from that, back to Newest component, I changed it to:

import { useState, useEffect } from "react"
import axios from "axios"
import { SITE_API } from "../../constants/constants"

import ItemCard from "../ItemCard"

function Newest() {
    const [newestData, setNewestData] = useState([])
    const newestUrl = `${SITE_API}/update-film`

    useEffect(() => {
        const CancelToken = axios.CancelToken
        const source = CancelToken.source()

        axios
            .get(newestUrl, { cancelToken: source.token })
            .then((data) => {
                setNewestData(data.data.data.items)
            })
            .catch((thrown) => {
                if (axios.isCancel(thrown)) return
            })
    }, [])

    return (
        <>
            <h2>NEWEST</h2>
            <div className="holder-item">
                <ItemCard newestData={newestData} />
            </div>
        </>
    )
}

export default Newest

So, is there a way for me to use the ItemCard component for 4 other components left? Because I think I need to pass 4 other props to ItemCard , but if so, how can I use it for each route, it's my first time trying this method, so please instruct me, I don't know what's this situation call to google it myself, thanks.

Answer 1

You can use it like you've already used it here, but you will either have to pass "newestData" as a prop, assuming it has a children/parent relationship. If it doesn't, you can use a common library called redux, with which you can set a global state of the newestData and use it anywhere in your code. If you do not want to use another library, you can accomplish the same using the built in react hook useContext.