React JS app getting error - Error: Element type is invalid

Question

I created an app using create react app. I added a functional component named Signup which is called from App.js. And I am getting an error on screen. It says I am not exporting component properly. I could not understand what is wrong. I am putting the three component files here.

Here is my file structure

Signup.js

import React, { useRef } from 'react'
import {Card, Form, Button} from 'react-bootstrap';

export default function Signup() {

    const emailRef = useRef();
    const passwordRef = useRef();
    const passwordConfirmRef = useRef();
    
    return (
        <>
            <Card>
                <Card.Body>
                    <h2 className="text-center mb-4">Sign up</h2>
                    <Form>
                        <Form.Group id="email">
                            <Form.label>Email</Form.label>
                            <Form.Control type="email" ref={emailRef} required />
                        </Form.Group>
                        <Form.Group id="password">
                            <Form.label>Email</Form.label>
                            <Form.Control type="password" ref={passwordRef} required />
                        </Form.Group>
                        <Form.Group id="password-confirm">
                            <Form.label>Confirm Password</Form.label>
                            <Form.Control type="password" ref={passwordConfirmRef} required />
                        </Form.Group>
                        <Button className="w-100" type="submit">Sign Up</Button>
                    </Form>
                </Card.Body>
            </Card>
            <div className="w-100 text-center mt-2">
                Already have an account? Login
            </div>
        </>
    )
}

App.js

import React from 'react';
import './App.css'
import Signup from './components/Signup'

export default function App() {
  return (
    <div className="App">
      <Signup/>
    </div>
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

Folder Structure

src (folder)
- App.js
- index.js
-- components (folder)
--- Signup.js

Error

Added folder structure to question. Yes, Signup.js is inside components folder. — Vinit Khandelwal
– Vinit Khandelwal, Commented Jan 17, 2021 at 7:53

FoundingBox · Accepted Answer · 2021-01-17 08:05:47Z

1

It seems that <Form.label> isn't the correct syntax in the react-bootstrap documentation, and I suspect that this is what's causing the element type is invalid error.

Trying changing it to <Form.Label>

edited Jan 17, 2021 at 8:05

answered Jan 17, 2021 at 7:59

FoundingBox

6134 silver badges7 bronze badges

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

3 Comments

Vinit Khandelwal Over a year ago

Absolutely. That is the problem. Thanks. But it's so sad that react doesn't give proper errors. Nowhere it mentions anything about Form.label. or even that the problem is with Form.

FoundingBox Over a year ago

I would strongly recommend you try learning and adding typescript to your react project. It can save you from problems like these all the time, you'll love it.

Vinit Khandelwal Over a year ago

Ya. I must attempt react on typescript. But are there enough tutorials on that?

Collectives™ on Stack Overflow

React JS app getting error - Error: Element type is invalid

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related