WATCHLIST COMPONENT (PART-3)

 IN THIS PART, WE WILL ADD THE ICONS WHILE HOVERING OVER EACH STOCK. WE WILL USE MATERIAL UI FOR IT.

INITIALLY WE CREATED A STATE VARIABLE (showWatchListActions)THAT IS SET TO FALSE. IT BECOMES TRUE WHEN WE HOVER OVER IT (MOUSE ENTER)  AND WHEN THE CONDITION IS TRUE WE USE THE WATCHLIST ACTION.

CONDITION:{showWatchListActions && <WatchlistActions uid={stock.name} />}

WE INCLUDE 4 BUTTONS BUY,SELL,ANALYTICS (CHART), MORE.

THE MATERIAL UI : <BarChartOutlined className="icon" />

 <MoreHoriz className="icon" />

const WatchlistItem = ({ stock }) => {

  const [showWatchListActions, setShowWatchListActions] = useState(false);

  const handleMouseEnter = (e) => {

    setShowWatchListActions(true);

  };

  const handleMouseLeave = (e) => {

    setShowWatchListActions(false);

  };

  return (

    <>

      <li onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>

        <div className="item">

          <p className={stock.isDown ? "down" : "up"}>{stock.name}</p>

          <div className="itemInfo">

            <span className="percent">{stock.percent}</span>

            {stock.isDown ? (

              <KeyboardArrowDown className="down" />

            ) : (

              <KeyboardArrowUp className="up" />

            )}

            <span className="price">{stock.price}</span>

          </div>

        </div>

        {showWatchListActions && <WatchlistActions uid={stock.name} />}

      </li>

    </>

  );

};

const WatchlistActions = ({ uid }) => {

  return (

    <span className="actions">

      <span>

        <span>

          <Tooltip

            title="Buy(B)"

            placement="top"

            arrow

            TransitionComponent={Grow}

          >

            <button className="buy">Buy</button>

          </Tooltip>

          <Tooltip

            title="Sell(S)"

            placement="top"

            arrow

            TransitionComponent={Grow}

          >

            <button className="sell">Sell</button>

          </Tooltip>

          <Tooltip

            title="Analytics(A)"

            placement="top"

            arrow

            TransitionComponent={Grow}

          >

            <button className="action">

              <BarChartOutlined className="icon" />

            </button>

          </Tooltip>

          <Tooltip

            title="more"

            placement="top"

            arrow

            TransitionComponent={Grow}

          >

            <button className="action">

              <MoreHoriz className="icon" />

            </button>

          </Tooltip>

        </span>

      </span>

    </span>

  );

};