Search code examples
javascriptreactjsecmascript-6es6-module-loader

How to create an instance of an imported class in another class


User.js

class User {

  constructor() {
    this.fisrtName
    this.lastName
  }

  get fullName() {
    `${this.firtName} ${this.lastName}`
  }

}

export default User

Test.js

import React from 'react'
import {User} from './User'

class Test extends React.Component {

  testClick(e) {
    const user = new User() //error! because User is undefined.
  }

  render() {
    return (
      <button onClick={this.testClick.bind(this)}>test</button>
    )
  }

}

export default Test

Solution

  • Change

    import {User} from './User'
    

    to

    import User from './User'
    

    Your mistake is that you are making default export: export default User inside of User.js module, but inside of Test.js you are making named import: import {User} from './User'.