WATCHLIST COMPONENT (PART-1)

 WE WILL USE MATERIAL UI FOR CREATING THE WATCHLIST.

TO INSTALL MATERIAL UI: npm install @mui/material @emotion/react @emotion/styled

THE DATA FOR WATCHLIST IS A DUMMY DATA THAT WE CREATED. WE WILL BEGIN WITH DISPLAYING THE NAME OF THE STOCKS.

WATCHLIST.JS

import React from "react";

import { Tooltip, Grow } from "@mui/material";

import { watchlist } from "../data/data";

export default function Watchlist(){

  return (

    <div className="watchlist-container">

      <div className="search-container">

        <input

          type="text"

          name="search"

          id="search"

          placeholder="Search eg:infy, bse, nifty fut weekly, gold mcx"

          className="search"

        />

        <span className="counts"> {watchlist.length} / 50</span>

      </div>

      <ul className="list">

        {watchlist.map((stock, index) => {

          return <p>{stock.name}</p>

        })}

      </ul>

    </div>

  );

}

HERE, WE WILL CREATE A SEPERATE COMPONENT, TO DISPLAY EACH STOCK.

      <ul className="list">

        {watchlist.map((stock, index) => {

          <Watchlist stock={stock} key={index} />;

        })}

      </ul>