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

Domino987 · Accepted Answer · 2019-11-25 10:45:27Z

4

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.

edited Nov 25, 2019 at 10:45

answered Aug 28, 2019 at 13:22

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related