title: How to solve "Element type is invalid" for my React app?
body: <p>I am trying to better structure my initial code. </p>
  
  <p><a href="https://codesandbox.io/s/jqvkqy29w" rel="nofollow noreferrer">https://codesandbox.io/s/jqvkqy29w</a></p>
  
  <p>However I have problems with integrating children components. As an example here I show how I import a child component <code>TopControls</code>. Also I am not sure if I imported <code>styles</code> correctly.</p>
  
  <p>Below I show the code of a main root component. The problem is that the page is empty and <code>TopControls</code> is not loaded. When I open console, I see the following warnings and errors (I use <code>"react": "^16.6.0"</code> and <code>"react-dom": "^16.6.0"</code>).</p>
  
  <blockquote>
    <p>Warning: React.createElement: type is invalid -- expected a string
    (for built-in components) or a class/function (for composite
    components) but got: object. You likely forgot to export your
    component from the file it's defined in, or you might have mixed up
    default and named imports.</p>
    
    <p>Check your code at Main.js:113.
        in _default (at App.js:21)
        in App (at src/index.js:5)</p>
    
    <p>react-dom.development.js:57 Uncaught Error: Element type is invalid:
    expected a string (for built-in components) or a class/function (for
    composite components) but got: object. You likely forgot to export
    your component from the file it's defined in, or you might have mixed
    up default and named imports.</p>
    
    <p>Check the render method of <code>_default</code>.
        at invariant (react-dom.development.js:57)
        at createFiberFromTypeAndProps (react-dom.development.js:10531)
        at createFiberFromElement (react-dom.development.js:10551)
        at createChild (react-dom.development.js:13811)
        at reconcileChildrenArray (react-dom.development.js:14080)
        at reconcileChildFibers (react-dom.development.js:14430)
        at reconcileChildren (react-dom.development.js:14817)
        at finishClassComponent (react-dom.development.js:15161)
        at updateClassComponent (react-dom.development.js:15096)
        at beginWork (react-dom.development.js:15980)
        at performUnitOfWork (react-dom.development.js:19102)
        at workLoop (react-dom.development.js:19143)
        at HTMLUnknownElement.callCallback (react-dom.development.js:147)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
        at invokeGuardedCallback (react-dom.development.js:250)
        at replayUnitOfWork (react-dom.development.js:18350)
        at renderRoot (react-dom.development.js:19261)
        at performWorkOnRoot (react-dom.development.js:20165)
        at performWork (react-dom.development.js:20075)
        at performSyncWork (react-dom.development.js:20049)
        at interactiveUpdates$1 (react-dom.development.js:20337)
        at interactiveUpdates (react-dom.development.js:2267)
        at dispatchInteractiveEvent (react-dom.development.js:5083) invariant @ react-dom.development.js:57 createFiberFromTypeAndProps @
    react-dom.development.js:10531 createFiberFromElement @
    react-dom.development.js:10551 createChild @
    react-dom.development.js:13811 reconcileChildrenArray @
    react-dom.development.js:14080 reconcileChildFibers @
    react-dom.development.js:14430 reconcileChildren @
    react-dom.development.js:14817 finishClassComponent @
    react-dom.development.js:15161 updateClassComponent @
    react-dom.development.js:15096 beginWork @
    react-dom.development.js:15980 performUnitOfWork @
    react-dom.development.js:19102 workLoop @
    react-dom.development.js:19143 callCallback @
    react-dom.development.js:147 invokeGuardedCallbackDev @
    react-dom.development.js:196 invokeGuardedCallback @
    react-dom.development.js:250 replayUnitOfWork @
    react-dom.development.js:18350 renderRoot @
    react-dom.development.js:19261 performWorkOnRoot @
    react-dom.development.js:20165 performWork @
    react-dom.development.js:20075 performSyncWork @
    react-dom.development.js:20049 interactiveUpdates$1 @
    react-dom.development.js:20337 interactiveUpdates @
    react-dom.development.js:2267 dispatchInteractiveEvent @
    react-dom.development.js:5083 index.js:1446 The above error occurred
    in the &lt;_default> component:
        in _default (at App.js:21)
        in App (at src/index.js:5)</p>
  </blockquote>
  
  <p><strong>Root component "Main.js":</strong></p>
  
  <pre><code>import React, { Component, Fragment } from 'react';
  import TopControls from "./layout/single/TopControls"
  import styles from "./layout/single/styles"
  
  
  export default class extends Component {
  
    constructor(props) {
        super(props);
        this.state = {
            holdingTime: 1,
            plannedDep: "2017-05-24T10:30",
            schedTurnd: 45,
            asma40: 100,
            asma60: 500,
            taxiInTime: 9.50,
            wake: 84.73,
            temperature: 20,
            visibility: 5999.66,
            windIntensity: 8.0,
            arrivalDelay: 5,
            distanceTarget: 500,
            airport: "LEBL",
            delay: 0,
            delay_probability: 0,
            delay_cat: "NA",
            chartDataWake: [],
            chartDataTurnaround: [],
            chartDataArrivalDelay: [],
            chartDataDistanceTarget: [],
            labelWidth: 0
        };
        this.handleChange = this.handleChange.bind(this);
    };
  
    componentDidMount() {
        this.fetchData();
    };
  
    updateDelay(predicted_delay,delay_probability) {
        this.state.chartDataWake = [...this.state.chartDataWake, {wake: this.state.wake===84.73 ? "H" : (this.state.wake===14.78 ? "M" : "L"), delay: predicted_delay}];
        this.state.chartDataTurnaround = [...this.state.chartDataTurnaround, {turnaround: this.state.schedTurnd, delay: predicted_delay}];
        this.state.chartDataArrivalDelay = [...this.state.chartDataArrivalDelay, {arrivalDelay: this.state.arrivalDelay, delay: predicted_delay}];
        this.state.chartDataDistanceTarget = [...this.state.chartDataDistanceTarget, {distanceTarget: this.state.distanceTarget, delay: predicted_delay}];
        this.setState({
          delay: predicted_delay,
          delay_probability: delay_probability,
          delay_cat: predicted_delay===0 ? "&lt;15" : (predicted_delay===1 ? "[15; 45]" : "&gt;45")
        });
    };
  
    fetchData = () =&gt; {
        const url = "http://localhost:8000?"+
          'holdingTime='+this.state.holdingTime+
          '&amp;plannedDep='+this.state.plannedDep+
          '&amp;schedTurnd='+this.state.schedTurnd+
          '&amp;asma40='+this.state.asma40+
          '&amp;asma60='+this.state.asma60+
          '&amp;taxiInTime='+this.state.taxiInTime+
          '&amp;wake='+this.state.wake+
          '&amp;temperature='+this.state.temperature+
          '&amp;visibility='+this.state.visibility+
          '&amp;windIntensity='+this.state.windIntensity+
          '&amp;arrivalDelay='+this.state.arrivalDelay+
          '&amp;distanceTarget='+this.state.distanceTarget;
  
        fetch(url, {
          method: "GET",
          dataType: "JSON",
          headers: {
            "Content-Type": "application/json; charset=utf-8",
          }
        })
        .then((resp) =&gt; {
          return resp.json()
        })
        .then((data) =&gt; {
          this.updateDelay(data.prediction,data.probability)
        })
        .catch((error) =&gt; {
          console.log(error, "catch the hoop")
        })
    };
  
    handleChange = (name, event) =&gt; {
      this.setState({
        [name]: event.target.value
      }, () =&gt; {
        console.log("plannedDep",this.state.plannedDep)
      });
    };
  
  
    handleReset = () =&gt; {
        this.setState({
            chartDataWake: [],
            chartDataTurnaround: [],
            chartDataArrivalDelay: [],
            chartDataDistanceTarget: [],
            delay: 0,
            delay_probability: 0,
            delay_cat: "NA"
        });
    };
  
    render() {
      return &lt;Fragment&gt;
  
        &lt;TopControls state={this.state} handleChange={this.handleChange} styles={styles} /&gt;
  
      &lt;/Fragment&gt;
    }
  }
  </code></pre>
  
  <p><strong>styles.js</strong></p>
  
  <pre><code>const styles = theme =&gt; ({
      header: {
          borderBottom: 'solid 1px rgba(0,0,0,0.4)',
          backgroundColor: '#253069',
          color: '#d2d6ef',
          overflow: 'hidden',
          boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
          position: 'relative',
          height: '12%'
      },
      h1: {
          fontSize: '30px',
          textAlign: 'center',
          fontFamily: 'sans-serif',
          lineHeight: '1.45em',
          webkitFontSmoothing: 'antialiased'
      },
      h3: {
          fontSize: '20px',
          textAlign: 'left',
          fontFamily: 'sans-serif',
          lineHeight: '1.45em',
          marginLeft: theme.spacing.unit*2,
          webkitFontSmoothing: 'antialiased'
      },
      appBar: {
        top: 'auto',
        bottom: 5,
        height: '10%'
      },
      toolbar: {
        alignItems: "center",
        justifyContent: "space-between"
      },
      textField: {
        fontSize: '12px',
        margin: theme.spacing.unit,
        minWidth: 120
      },
      formControl: {
        fontSize: '12px',
        margin: theme.spacing.unit,
        minWidth: 120
      },
      predictedDelay: {
          marginTop: '10px',
          position: 'relative',
          minWidth: 350,
          maxWidth: 350,
          textAlign: 'center',
          fontFamily: 'sans-serif',
          backgroundColor: 'rgb(225, 0, 80)'
      },
      predictedDelayText: {
          fontSize: '18px'
      },
      topControls: {
          borderBottom: '1px solid #ddd',
          height: '25%',
          boxShadow: '0 1px 4px rgba(0,0,0,0.08)',
          background: 'white',
          marginLeft: theme.spacing.unit*2,
          marginRight: theme.spacing.unit*2,
      },
      mainPart: {
          webkitJustifyContent: 'space-between',
          justifyContent: 'space-between',
          marginTop: '30px',
          marginBottom: '50px',
          paddingTop: '2px',
          position: 'relative',
          backgroundColor: '#f7f7f7'
      },
      card: {
          maxWidth: 200
      },
      paper: {
          backgroundColor: '#f7f7f7',
          padding: theme.spacing.unit * 2,
          height: '70%',
          marginLeft: theme.spacing.unit * 2,
          marginRight: theme.spacing.unit * 2,
      },
      buttons: {
          display: 'flex',
          justifyContent: 'flex-end',
      },
      rightIcon: {
          marginLeft: theme.spacing.unit,
      },
      button: {
          marginTop: theme.spacing.unit * 3,
          marginLeft: theme.spacing.unit,
      }
  });
  </code></pre>
  
  <p><strong>TopControls</strong></p>
  
  <pre><code>import React, { Component, Fragment } from 'react';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import Grid from '@material-ui/core/Grid';
  import FormControl from '@material-ui/core/FormControl';
  import Input from '@material-ui/core/Input';
  import InputLabel from '@material-ui/core/InputLabel';
  import MenuItem from '@material-ui/core/MenuItem';
  import Select from '@material-ui/core/Select';
  import TextField from '@material-ui/core/TextField';
  import InputAdornment from '@material-ui/core/InputAdornment';
  
  export default class extends Component {
      render() {
          return (
          &lt;Fragment&gt;
              &lt;CssBaseline /&gt;
  
              &lt;div className={this.props.styles.header}&gt;
                &lt;h1 className={this.props.styles.h1}&gt;
                  Prediction of departure delays for a single flight
                &lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;div className={this.props.styles.topControls}&gt;
                &lt;Grid container spacing={24}&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="outlined-simple-start-adornment"
                        className={this.props.styles.textField}
                        onChange={(event) =&gt; this.props.handleChange("holdingTime", event)}
                        value={this.props.state.holdingTime}
                        margin="normal"
                        label="Holding time"
                        type="number"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;(seconds)&lt;/InputAdornment&gt;,
                        }}
                        onInput = {(e) =&gt;{
                            e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="standard-number"
                        label="Additional ASMA 40"
                        onChange={(event) =&gt; this.props.handleChange("asma40", event)}
                        value={this.props.state.asma40}
                        type="number"
                        className={this.props.styles.textField}
                        margin="normal"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;(seconds)&lt;/InputAdornment&gt;,
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="standard-number"
                        label="Additional ASMA 60"
                        onChange={(event) =&gt; this.props.handleChange("asma60", event)}
                        value={this.props.state.asma60}
                        type="number"
                        className={this.props.styles.textField}
                        margin="normal"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;(seconds)&lt;/InputAdornment&gt;,
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                      required
                      name="plannedDep"
                      id="datetime-local"
                      onChange={(event) =&gt; this.props.handleChange("plannedDep", event)}
                      value={this.props.state.plannedDep}
                      label="Scheduled departure"
                      type="datetime-local"
                      className={this.props.styles.textField}
                      margin="normal"
                      InputLabelProps={{
                        shrink: true,
                      }}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="standard-number"
                        label="Planned turnaround"
                        onChange={(event) =&gt; this.props.handleChange("schedTurnd", event)}
                        value={this.props.state.schedTurnd}
                        type="number"
                        className={this.props.styles.textField}
                        margin="normal"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;(minutes)&lt;/InputAdornment&gt;,
                        }}
                        onInput = {(e) =&gt;{
                            e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="standard-number"
                        label="Taxi-In time"
                        onChange={(event) =&gt; this.props.handleChange("taxiInTime", event)}
                        value={this.props.state.taxiInTime}
                        type="number"
                        className={this.props.styles.textField}
                        margin="normal"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;(seconds)&lt;/InputAdornment&gt;,
                        }}
                        onInput = {(e) =&gt;{
                            e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                &lt;/Grid&gt;
                &lt;Grid container spacing={24}&gt;
                  &lt;Grid item xs={2}&gt;
                      &lt;FormControl
                          required
                          className={this.props.styles.formControl}
                          margin="normal"&gt;
                          &lt;InputLabel shrink htmlFor="wake-label-placeholder"&gt;
                                  Wake
                          &lt;/InputLabel&gt;
                          &lt;Select
                            onChange={(event) =&gt; this.props.handleChange("wake", event)}
                            value={this.props.state.wake}
                            input={&lt;Input name="wake" id="wake-label-placeholder" /&gt;}
                            displayEmpty
                            name="wake"
                          &gt;
                            &lt;MenuItem value={84.73}&gt;Heavy&lt;/MenuItem&gt;
                            &lt;MenuItem value={14.78}&gt;Medium&lt;/MenuItem&gt;
                            &lt;MenuItem value={0.49}&gt;Light&lt;/MenuItem&gt;
                          &lt;/Select&gt;
                      &lt;/FormControl&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="standard-number"
                        label="Temperature"
                        onChange={(event) =&gt; this.props.handleChange("temperature", event)}
                        value={this.props.state.temperature}
                        type="number"
                        className={this.props.styles.textField}
                        margin="normal"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;(Celsius)&lt;/InputAdornment&gt;,
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="standard-number"
                        label="Visibility"
                        onChange={(event) =&gt; this.props.handleChange("visibility", event)}
                        value={this.props.state.visibility}
                        type="number"
                        className={this.props.styles.textField}
                        margin="normal"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;&lt;/InputAdornment&gt;,
                        }}
                        onInput = {(e) =&gt;{
                            e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="standard-number"
                        label="Wind Intensity"
                        onChange={(event) =&gt; this.props.handleChange("windIntensity", event)}
                        value={this.state.windIntensity}
                        type="number"
                        className={this.props.styles.textField}
                        margin="normal"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;(knots)&lt;/InputAdornment&gt;,
                        }}
                        onInput = {(e) =&gt;{
                            e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="standard-number"
                        label="Arrival delay"
                        onChange={(event) =&gt; this.props.handleChange("arrivalDelay", event)}
                        value={this.props.state.arrivalDelay}
                        type="number"
                        className={this.props.styles.textField}
                        margin="normal"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;(minutes)&lt;/InputAdornment&gt;,
                        }}
                        onInput = {(e) =&gt;{
                            e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2}&gt;
                    &lt;TextField
                        required
                        id="standard-number"
                        label="Distance to target"
                        onChange={(event) =&gt; this.props.handleChange("distanceTarget", event)}
                        value={this.props.state.distanceTarget}
                        type="number"
                        className={this.props.styles.textField}
                        margin="normal"
                        InputProps={{
                            startAdornment: &lt;InputAdornment position="start"&gt;(km)&lt;/InputAdornment&gt;
                        }}
                        onInput = {(e) =&gt;{
                            e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
                        }}
                    /&gt;
                  &lt;/Grid&gt;
                &lt;/Grid&gt;
              &lt;/div&gt;
  
          &lt;/Fragment&gt;
        );
      }
  }
  </code></pre>
  
  <p>Does somebody know where the problem is?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I also tried this, but it gives me the same error:</p>
  
  <pre><code>const TopControls = () =&gt; (
    ...
  );
  
  export default TopControls;
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import SelectionPage from "../modes/SelectionPage";
  import Main from "../modes/Main";
  import Main2 from "../modes/Main2";
  
  class App extends Component {
    state = {
      renderView: 0
    };
  
    clickBtn = e =&gt; {
      console.log(e.target.value);
      this.setState({
        renderView: +e.target.parentNode.value
      });
    };
  
    render() {
      switch (this.state.renderView) {
        case 1:
          return &lt;Main /&gt;;
        case 2:
          return &lt;Main2 /&gt;;
        default:
          return &lt;SelectionPage clickBtn={this.clickBtn} /&gt;;
      }
    }
  }
  
  export default App;
  </code></pre>