CODEWITHSUNDEEP
reactjs
Molly Christian
Molly Christian

Reputation: 167

Importing a directory in React

I have a components directory in src which has a directory called calculator and then it has 3 different components, instead of importing all 3 I was thinking if I can just import the directory calculator.

one of component has following code

 import React from 'react';
import {Textfit} from 'react-textfit';

const Screen = (props) => {
    return (
        <div className="screen--container">
          <Textfit
            max={40}
            throttle={60}
            mode="single"
            className="screen-top"
          >
            { props.expression }
          </Textfit>
          <Textfit
            max={150}
            mode="single"
            className="screen-bottom"
          >
            { props.total }
          </Textfit>
        </div>
      )
}

export default Screen;

And then in my App.js I have

import React, { Component } from "react";
import Calculator from "./components/calculator";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="calculator--container">
        <Calculator.Screen {...this.props} />
        <Calculator.Keypad {...this.props} />
      </div>
    );
  }
}

export default App;

But currently its giving me an error as below ./src/App.js Module not found: Can't resolve './components/calculator' in 'C:.....\react-simple-calculator\src'

How can I make this work?

Also, the original code from developer had 

export default (props) => {
return ()}

but I have changed it to 

const Screen = (props) => { }
export default Screen;

Is that correct, what does the first one mean? The code am referring to is : https://medium.com/@mazinosukah/lets-build-a-calculator-with-redux-and-react-using-tdd-6cb11946bad4

Upvotes: 4

Views: 21080

Answers (2)

Chris Poe
Chris Poe

Reputation: 808

You can't import whole directories in that fashion. If you are looking for cleaner imports try this:

Go within your calculator directory and create an index.js file. Then, inside that file import all 3 components and export them as named exports.

./components/calculator/index.js

import One from './One';
import Two from './Two';
import Three from './Three';

export { One, Two, Three };

Then, wherever you need to use the components you can import them like so

import { One, Two, Three } from './calculator';

You'll still have to import them separately the one time. However, this keeps your imports light in the likely event that you wont always require the use of all the components within a single directory. Sometimes you won't need component Two from instance, so you would just import One and Three.

Hope this helps!

Upvotes: 13

Prithwee Das
Prithwee Das

Reputation: 5226

import Calculator from "./components/calculator" by default this will import the ./components/calculator/index.js file, and I', guessing you don't have any index.js in that calculator directory, That's why you are getting that error

Upvotes: 1

Related Questions