WATCHLIST COMPONENT (PART-2)

 WE WILL CREATE A NEW COMPONENT AND IMPORT IT IN THE WATCHLIST COMPONENT.

IN THIS PART , WE WILL DISPLAY THE NAME OF THE STOCK, IT'S PERCENTAGE ,AN ARROW, AND IT'S PRICE.

TO DISPLAY THE ARROW WE USE MATERIAL UI.

 <ul className="list">

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

          return <WatchlistItem stock={stock} key={index} />;

        })}

      </ul>

export default function 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>

      </li>

    </>

  );

}