Rendering inside other component

[Karol Działowski]

Why can't I render this <ReactSVG /> in the standard React way as a child of other component. Simple example:

import "./styles.css";
import ReactSVG from "react-svg";

export default function App() {
  return (
    <div className="App">
      <ReactSVG />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Gives error:

Error
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

CodeSandbox: https://codesandbox.io/s/svg-injector-tests-35rd9?file=/src/App.js:0-252

Code works if I use ReactDom.render like:

import React from 'react'
import ReactDOM from 'react-dom'
import { ReactSVG } from 'react-svg'

ReactDOM.render(<ReactSVG src="svg.svg" />, document.getElementById('root'))

[Karol Działowski]

Ok it was my mistake. Bad import. Should be:

import { ReactSVG } from 'react-svg'

not

import ReactSVG from "react-svg";