How do I include a namespace with a react tsx import?

Question

When I try to import the component 'deleteButton', the compiler claims the class does not exist.

I have tried using an export default, and importing it under an alias.

import React from 'react';
import deleteButton from './Components/deleteButton';

const App: React.FC = () => {
  return (
    <deleteButton/>

  );
}

export default App;

import React from 'react';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';

export default class deleteButton extends React.Component {
  submit = () => {
    confirmAlert({
      title: 'Confirm to delete',
      message: 'Are you sure to delete this file?.',
      buttons: [
        {
          label: 'Yes',
          onClick: () => alert('File deleted')
        },
        {
          label: 'No',
          onClick: () => alert('Canceled')
        }
      ]
    });
  };
  render() {
    return (<div className='container'>
      <button onClick={this.submit}>Delete</button>
    </div>);
  }
}

The expected output should be an HTML Element. The compiler claims: Property 'deleteButton' does not exist on type 'JSX.IntrinsicElements'. TS2339

Answer 1

You need to write JSX-Elements upper-case so that react can distinguish between custom elements and build-in ones like span or div. Docs

If you write it lower case, it will look for a native element, which does not exist. So change the name to be upper-case and it will work:

import DeleteButton from './Components/deleteButton';

Hope this helps. Happy coding.