Sharepoint Online + React TS. Property 'XXX' doesn not exist on type 'XXX'

Question

So I'm currently working on this project, the project consists of Sharepoint Online and React TS. I'm currently building a dropdown menu, and have created the props and methods for the dropdown, however, I keep getting an errors:

1. Property 'dropdownMenu' does not exist on type 'Card'.

2. Property 'showMenu' does not exist on type 'Readonly<{}> & Readonly<{children?:ReactNode;}>'.

import * as React from "react";
import styles from "./Card.module.scss";
import { Image, IImageProps, ImageFit } from "office-ui-fabric-react/lib/Image";
import { escape } from "@microsoft/sp-lodash-subset";
import {
  DocumentCard,
  DocumentCardDetails,
  DocumentCardImage,
} from "office-ui-fabric-react/lib/DocumentCard";
import { TestImages } from "@uifabric/example-data";


export default class Card extends React.Component {
  constructor() {
    super({});

    this.state = {
      showMenu: false,
    };

    this.showMenu = this.showMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  public showMenu(event) {
    event.preventDefault();

    this.setState({ showMenu: true }, () => {
      document.addEventListener('click', this.closeMenu);
    });
  }

  public closeMenu(event) {
    if(!this.dropdownMenu.contains(event.target)) {

      this.setState({ showMenu: false}, () => {
        document.removeEventListener('click', this.closeMenu);
      });
    }
  }



  public render() {



    return (
      <DocumentCard className={styles.cardContainer}>
        <DocumentCardImage height={120} imageFit={ImageFit.cover} imageSrc={TestImages.documentPreviewTwo} />
        <DocumentCardDetails>
          <button onClick={this.showMenu}>Politicas</button>
          {
            this.props.showMenu            
            ? (
              <div className={styles.menu} ref={(element) => {
                this.dropdownMenu = element;
              }}>
                <ul>
                  <li>Lorem impsun</li>
                  <li>Lorem impsun</li>
                  <li>Lorem impsun</li>
                  <li>Lorem impsun</li>
                  <li>Lorem impsun
                    <ul>
                      <li>Lorem impsun</li>
                      <li>Lorem impsun</li>
                    </ul>
                  </li>
                </ul>
              </div>
            )
            : (
              null
            )
          }
        </DocumentCardDetails>
      </DocumentCard>
    );
  }
}

Line with errors:

1. Line 34

if(!this.dropdownMenu.contains(event.target))

2. Line 54

this.props.showMenu

Thanks in advance for whoever helps.

Answer 1

You have't define dropdownMenu, define dropdownMenu in your class so you could set the ref to it.

Sample demo in my project.

protected slider;

<Slider ref={c => (this.slider = c)} {...settings}>