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

Offtopic: `
{i = 1 ? 'True!' : 'False'}
` this is probably wrong, unless you really want to assign `1` to `i`. ` — JensG, Jun 12 '16 at 11:41
It might have to do with the fact that you have more than one `export default`. Try using regular exports for all you components. — Gilad Artzi, Jun 12 '16 at 11:41
It worked I used regular exports for all the components and now the code is working Thank you very much Gilad. Sorry for my late response I had to go out to get some work done. — Ganesh G, Jun 12 '16 at 12:28

score 4 · Answer 1 · answered Nov 09 '16 at 07:36

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 mains 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

Surya Bhusal · Answer 2 · 2019-09-08T17:46:21.900

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. ;)

react js importing multiple component from a single jsx file

{i = 1 ? 'True!' : 'False'}

2 Answers2