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.

Solution

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';

Comments

[XDX]

There is already code inside return but still i tried what you mentioned, it didn't work.

[lipp]

Can you show the actual render method? Maybe some component you are rendering within are undefined

[XDX]

Yes i removed Fragment and found it is an export of react package but unable to figure out Control export.

[lipp]

I'm not familiar with react-typeahead, but i think you want to use import {Fragment} from 'react'

[Weedoze]

This should be a comment and not an answer

[Weedoze]

This should be a comment and not an answer

[lipp]

Sorry, based upon the initial question, this was the answer :)

[XDX]

No Control is not a part of typeahead.

[Fadi Abo Msalam]

@XDX i think it is a part of react-redux-form

[Fadi Abo Msalam]

@Weedoze can you tell why this is so that next time i don't do it , i have checked documentation of react-typeahead and there is no import for Fragement and Control and this is the issue

[Weedoze]

@FadiAboMsalam I understand your point of view but I think that it is a comment because you are using words like "I think the issue ...", "Please try to remove...". Now if he removes it and it still doesn't work ? You can ask OP to try think in comment to add more information to the question and when it is clearer you can post it as an answer because your 100% sure it will fix the problem. This is only my opinion and I am not an admin :)