Using component in Typescript

[amoreau2002]

Having issue implementing the AriaModal component in typescript. Compiler always show me "Type '() => void' is not assignable to type '() => ReactNode'" on render method. Any one have used it in typescript before ?

[olabaloo]

I use the following code in TypeScript, it works as a charm!

import * as React from "react";
import AriaModal from "react-aria-modal";

interface State {
  modalActive: boolean;
}

class DemoOne extends React.Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      modalActive: false
    };

    this.activateModal = this.activateModal.bind(this);
    this.deactivateModal = this.deactivateModal.bind(this);
    this.getApplicationNode = this.getApplicationNode.bind(this);
  }

  activateModal = () => {
    this.setState({ modalActive: true });
  };

  deactivateModal = () => {
    this.setState({ modalActive: false });
  };

  getApplicationNode = () => {
    return document.getElementById('application');
  };

  render() {
    const modal = this.state.modalActive
      ? <AriaModal
          titleText="demo one"
          onExit={this.deactivateModal}
          initialFocus="#demo-one-deactivate"
          getApplicationNode={this.getApplicationNode}
          underlayStyle={{ paddingTop: '2em' }}
        >
          <div id="demo-one-modal" className="modal">
            <div className="modal-body">
              <p>
                Here is a modal
                {' '}
                <a href="#">with</a>
                {' '}
                <a href="#">some</a>
                {' '}
                <a href="#">focusable</a>
                {' '}
                parts.
              </p>
            </div>
            <footer className="modal-footer">
              <button id="demo-one-deactivate" onClick={this.deactivateModal}>
                deactivate modal
              </button>
            </footer>
          </div>
        </AriaModal>
      : false;

    return (
      <div>
        <button onClick={this.activateModal}>
          activate modal
        </button>
        {modal}
      </div>
    );
  }
}

export default DemoOne;

[amoreau2002]

Thx @olabaloo i have strip every part of my app and have past your DemoOne injto my app.tsx. I still have this anoying error :

react-dom.development.js:62 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

If you ever encounter such any help would be greatly appreciate !!

[olabaloo]

@amoreau2002 This looks like a react usage error that is unrelated to react-aria-modal. I suggest you google how to fix it.