How to hide <div> element from indexing by Google?

Question

I have such a component that I need to hide from Google indexing, but this component is used on every page of the site.

const SmallCompaniesBlock = ({code, price, exchange, changes, beta}) => {
  return (
    <div className={styles["companies-item"]}>
      <div className={styles["item-code"]}>{code}</div>
      <div className={styles["item-wrapper"]}>
        <div className={styles["price-per-stock"]}>{price}$</div>
        <div className={styles["stock-exchange"]}>{exchange}</div>
      </div>
      <div className={styles["item-wrapper"]}>
        <div className={styles["stock-percent"]}>+0,10%</div>
        <div className={styles["stock-increase"]}>+128,6$</div>
      </div>
    </div>
  );
};

I tried the following options:

- data-nosnippet="true"

<div className={styles["companies-item"]} data-nosnippet="true">
     ....
</div>

- noindex tag

<noindex>
    <div className={styles["companies-item"]} data-nosnippet="true">
         ....
    </div>
</noindex> // but this only for bad browsers