Importing a directory in React

Question

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

Chris Poe · Accepted Answer · 2020-10-19 00:32:59Z

14

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!

edited Oct 19, 2020 at 0:32

answered Mar 13, 2019 at 13:42

Chris Poe

8187 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prithwee Das · Accepted Answer · 2019-03-13 13:06:36Z

1

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

answered Mar 13, 2019 at 13:06

Prithwee Das

5,3162 gold badges18 silver badges28 bronze badges

Collectives™ on Stack Overflow

Importing a directory in React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related