You might have used trading apps. They have real time stock tickers which changes very frequently after every second. So I have implemented such a ticker using react hooks.

• Create data file stocks.json that will contain data of stocks

export const stocks = [
    {
        name: "NIFTY BANK",
        price: "36,007.85",
        profit: '800.25(2.7%)',
        loss: ''
    },
    {
        name: "SENSEX",
        price: "49,787.55",
        profit: '',
        loss: '200.25(2.7%)'
    },
    {
        name: "NIFTY 50",
        price: "16,277.55",
        profit: '118.15(0.74%)',
        loss: ''
    }
]

• We will create a separate component Banner.js for displaying stock tickers. Data will be passed from App component to Banner every second there will be different stock data passed to Banner component and It will display it. I have used remixicon.com in this project.

import 'remixicon/fonts/remixicon.css'

function Banner({ item }) {
    return (
        <>
            <div className="stock-card">
                <div className="stock-name">
                    <i className="ri-stock-fill"></i>
                    <h5>{item.name}</h5>
                </div>
                <div className="stock-price">
                    {
                        item.profit ?
                            <>
                                <i className="ri-arrow-up-s-fill profit"></i>
                                <small>{item.profit}</small>
                            </>
                            :
                            <>
                                <i className="ri-arrow-down-s-fill loss"></i>
                                <small className="loss">{item.loss}</small>
                            </>
                    }
                    <p>{item.price}</p>
                </div>

            </div>
        </>
    );
}

export default Banner;

• Now First we will import Banner component and stocks data in our App component

import Banner from './components/Banner';
import { stocks } from './data/stocks';
import { useEffect, useState } from 'react';

• Then we will declare state variable which will contain index of stock and we will update it every second using setInterval function. Here we will use useEffect hook to setInterval and it will be dependent on index variable so it will trigger everytime index variable updates and we will update index every second. So that we will get different stock data every second.

const [data, setData] = useState(stocks);
const [index, setIndex] = useState(0);

useEffect(() => {
    let slider = setInterval(() => {
      if (index === data.length - 1) {
        setIndex(0)
      } else {
        setIndex(index + 1);
      }

    }, 1000);
    return () => {
      clearInterval(slider);
    };
  }, [index]);

return (
    <>
      {
        data.map((item, indx) => {
          if (indx === index) {
            return <Banner key={indx} item={item} index={index} />
           }
         })
       }
    </>
   );
 }

export default App;