Check the render method of `App`

Question

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.

Check the render method of App.

App.js

import React, {Component, Fragment} from 'react';
import {Typeahead, Control} from 'react-typeahead';
import {FormGroup} from 'react-bootstrap';


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      multiple: false
    }
}

    render() {
      const {multiple} = this.state;
      return (

    <Fragment>
      <Typeahead
        labelKey="name"
        multiple={multiple}
        options={[
        'Waylon Dalton',
        'Justine Henderson',
        'Abdullah Lang',
        'Marcus Cruz',
        'Thalia Cobb',
        'Mathias Little',
        'Eddie Randolph',
        'Angela Walker',
        'Lia Shelton',
        'Hadassah Hartman',
        'Joanna Shaffer',
        'Jonathon Sheppard'
      ]}
        placeholder="Choose a state..."
      />
      <FormGroup>
        <Control
          checked={multiple}
          onChange={(e) => this.setState({multiple: e.target.checked})}
          type="checkbox">
          Multi-Select
        </Control>
      </FormGroup>
    </Fragment>
       )
    }
}

index.js

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


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

I created this project using CRA. This error states that there is something wrong in my import/export but i don't find anything wrong in my import/export of both the files, error is focusing on App.js render function and also render of index.js file. I also checked here but it didn't work for me, can someone help me.

Answer 1

Your App import/export is ok.

I think you mixed up the Fragment import (it's part of React) and the Control import:

import React, {Component, Fragment} from 'react';
import {Typeahead} from 'react-typeahead';
import {FormGroup, FormControl as Control} from 'react-bootstrap';