CODEWITHSUNDEEP
reactjsreact-native
Abdirizak Obsiye
Abdirizak Obsiye

Reputation: 285

ReactJS why is import export not working for me?

I try to get the Form component in. It doesn't work when it's in a separate file however when I place the Form component in the same file, it works.

App component is below 

import React, { Component } from 'react';
import Form from './Form';
import logo from './logo.svg';
import './App.css';
import './content.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Form />
      </div>
    );
  }
}

export default App;

Form component below in Form.js

import React, { Component } from 'react';
import './content.css';

class Form extends Component {
  constructor() {
     super();
     this.state = {
       count: 0,
     };
   }

  updateCount() {
   this.setState((prevState, props) => {
     return { count: prevState.count + 1 }
   });
 }

  render() {
    return (
      <div id="loginWrap">
      <form id="loginForm">
        <span class="logTitle">Username</span><br/>
          <input type="text" id="username" placeholder="" value={this.state.count} onclick="onFoc()"/><br/>
        <span class="logTitle">Password</span><br/>
          <input type="password" id="password" placeholder="" /><br/><br/>
        <button id="login"  onClick={() => this.updateCount()}>submit</button>
      </form>
    </div>
    );
  }

}

To note: I'm very new to ReactJS (My first JS framework... excluding JQuery)

Upvotes: 1

Views: 170

Answers (1)

Chase DeAnda
Chase DeAnda

Reputation: 16441

You forgot to export your Form component:

Change:

class Form extends Component {...}

To:

export default class Form extends Component {...}

Upvotes: 6

Related Questions