Ad

Embedding Child Components In ReactJS

- 1 answer

I'm trying the most basic of tasks: creating a parent component that calls in a child component using react.js.

Here's my parent component code:

import React from 'react';
import ReactDOM from 'react-dom';

import PanelTop from './PanelTop.jsx';

class Card extends React.Component {
  render() {
    return <PanelTop/>
  }
}

ReactDOM.render(<Card/>, document.getElementById("card"));

Apparently, return <PanelTop/> is throwing the following error:

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). Check the render method of Card

PanelTop.jsx contains:

import React from 'react';

export class PanelTop extends React.Component {
  render(){
    return <div class="panel" id="panelTop"><button>Click Me!</button></div>
  }
}

Obviously I'm missing something, like how imports and exports work in ES6.

Ad

Answer

That happens because you need export PanelTop class(it is called Named exports) from PanelTop.jsx, like this

import { PanelTop } from './PanelTop.jsx';

or use default exports in PanelTop.jsx

export default class PanelTop extends React.Component {
  // ...
}
Ad
source: stackoverflow.com
Ad