react js importing multiple component from a single jsx file

Question

I am trying to import multiple component which is in one single jsx file in the main js file

This question has been already answered but without example here How to import and export components using React + ES6 + webpack?

My code is as below

App3.jsx file

import React from '../node_modules/react';


export default class App2 extends React.Component {
   render() {
       var i = 1;

       var myStyle = {
         fontSize: 25,
         color: '#FF0000'
       }

      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
            <h1>{1+1}</h1>
            <h1>{i = 1 ? 'True!' : 'False'}</h1>
            <h1 style = {myStyle}>Header</h1>
            { /*gsadjshds */ }
         </div>
      );
   }
}




export default class App3 extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

export default class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

export default class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}

And main.js file as below

import React from './node_modules/react';
import ReactDOM from './node_modules/react-dom';
import App  from './js/App.jsx';
import App1  from './js/App1.jsx';
import {App2, App3}  from './js/App3.jsx';


ReactDOM.render(<App />, document.getElementById('app'));
ReactDOM.render(<App1 />, document.getElementById('app1'));
ReactDOM.render(<App2 />, document.getElementById('app2'));
ReactDOM.render(<App3 />, document.getElementById('app3'));

But i am getting below errors

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Your help will be appreciated

Answer 1

May because you are using multiple export default in a single file. React treats export default like the main class/function of the file and will conflict with other main s upon export. Your code should probably be

import React from '../node_modules/react';


class App2 extends React.Component {
render() {
   var i = 1;

   var myStyle = {
     fontSize: 25,
     color: '#FF0000'
   }

  return (
     <div>
        <h1>Header</h1>
        <h2>Content</h2>
        <p data-myattribute = "somevalue">This is the content!!!</p>
        <h1>{1+1}</h1>
        <h1>{i = 1 ? 'True!' : 'False'}</h1>
        <h1 style = {myStyle}>Header</h1>
        { /*gsadjshds */ }
     </div>
  );
  }
}




class App3 extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export { App2, App3 };

reference: https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

Answer 2

Syntax:

import component_exported_as_default, {component_1, component_n} from './path/filename'

Basically you need to import the components which are not exported by default inside the curly braces {} . For example consider the code below (i've considered the functional component but the import strategy is same for class based components too).

components/my_component.js

import React from 'react'

export default function component_exported_as_default(){
    return <p>Exported by default</p>
}

export function component_1(){
    return <p>Component_1</p>
}

export function component_2(){
    return <p>Component_2</p>
}

App.js

import component_exported_as_default, {component_1,component2} from 'components/my_component.js'
function App(){
   return(
      <div className="APP">
         <component_exported_as_default>
         <component_1>
         <component2>
      </div>
   )
}

Hope this helps. ;)