JavaScript

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

Answer

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>

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

Advertisement

Answer