How to display a particular component with different API data on different pages

Question

I am new to react and there is this challenge that i am having, I have slider created a component

import React from 'react'
import NextEvent from '../nextEvent/NextEvent'
import './slider.css';


function Slider(props) {
    const {id, image, sub_title, title} = props;

 
    return (
        <main id='slider'>
             <div className="slide" key= {id}>
                        <div className="slide-image">
                            <img src={image} alt="slider-background"/>
                        </div>
                        <h1>{title} </h1>
                         <h5>...{sub_title}</h5>
            
                    </div>
                  <div className="event-countdown">
                        <NextEvent/>
                    </div>
        </main>
 

    )
    }

export default Slider

I need to have this banner component on almost all my pages, and on each of the pages, it comes with a different information (image, title, subtitle)

the backend guy sent the api and i consumed, but the problem is that, if i consume the api on the component directly, all the pages will have the same info on the banner component which is not what i want, also consuming the API on the homepage seemed like it was not the right thing to do, so i created another component which collects the Api and i then added that new component to my homepage.

now my question goes:

1. did i do the correct thing?

2. if correct, does it mean i have to create new corresponding components that will receive the APi for each page i want to display the banner just like i did for the homepage?

3. will i have to as the backend guy to create different apis for each of the pages in which the component is to be displayed

4. if no please help me with an efficient way which i can inject data coming from the backend into a component which will be displayed on different pages with different data

this is the new component i created for the APi consumption

import React, {useState, useEffect } from 'react'
import NextEvent from '../../components/nextEvent/NextEvent'
import axios from "axios";
import '../../components/slider/slider.css';



const sliderUrl = "*************************************"

function HomeSlider(props) {
    
    const [sliderData, setSliderData] = useState([]);
    const { image, sub_title, title} = props;

    const getSliderContents = async () => {
        const response = await axios.get(sliderUrl);
        const content =  response.data;
        setSliderData(content);
        
        
    }

    useEffect(() => {
        getSliderContents();
    }, [])

    
    // console.log("slider", sliderData)
   if(sliderData) {
    return (
        <main id='slider'>
            {sliderData.map((item) => {
                

                    return (
                        <div className="slide" key= {item.id}>
                        <div className="slide-image">
                            <img src={item.image} alt="slider-background"/>
                        </div>
                        <h1>{item.title} </h1>
                         <h5>...{item.sub_title}</h5>
            
                    </div>
                    )
                
            })}
          
                    <div className="event-countdown">
                        <NextEvent/>
                    </div>
        </main>
    )
   }
}

    


export default HomeSlider

this is the Homepage i displayed it

    function HomePage() {
    return (
        <div>
             <NavBar/>
            <SecondaryMenu/>
            <HomeSlider />
            <FeaturedBox />

Please any help is appreciated, i have search all over but no one explains how to display component with different data on different pages

Answer 1

So i just wanted to get back on this, i figured i have to setup a service point where i call the api and then consume the endpoints on each page as desired