Import react component and add to dom automatically

Question

I am trying to run my jsx within a javascript file like this:

import React from 'react'

export class HeaderNav extends React.Component {
  constructor(props) {
    super(props)
    console.log('Created Component')
  }
}

console.log('Create New Component');
<HeaderNav />

I then have an mdx file that imports the react component like this:

import '../mdx/header-nav'

This doesn't create the component and only Create New Component is output to the console, and I would expect both console.logs to print.

When I import the component into my MDX file, and place the html then it works just fine:

import React from 'react'

export class HeaderNav extends React.Component {
  constructor(props) {
    super(props)
    console.log('Created Component')
  }
}

I then have an mdx file that imports the react component like this:

import { HeaderNav } from '../mdx'

<HeaderNav />

This creates the component and outputs Created Component in the console.

Is there something that I need to do to use the first method of importing the file so I don't have to place the element in all of my mdx files?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only This should answer your question — Akhil Aravind, Feb 27 '22 at 16:31
If you are using something like `react-router`, [this approach](https://stackoverflow.com/a/53338344/10067393) might be useful; you wouldn't even need to import `HeaderNav` into your individual components. — Jarmo, Feb 27 '22 at 16:44
I am not (personally), I am using storybook so maybe storybook does? — Get Off My Lawn, Feb 27 '22 at 16:48

Import react component and add to dom automatically

0 Answers0