error when trying to get value from function in react

Question

I have a react component where I'm importing a function from another file like this:

import documentIcons from '/documentIcons';

Then I'm trying to use that function like this:

let file = this.state.selectedFile;  //this returns fine
let fileExt = file.name.split('.').pop();   //this also works
let fileIcon = documentIcons(fileExt);   //this throws the error

But I keep getting this error:

Uncaught TypeError: Object(...) is not a function

The documentIcons.js file looks like this:

const icons= {
  "jlr": "/icn/typeA.png",
  "trr": "/icn/typeB.png",
  "bpx": "/icn/typeC.png",
};

export const documentIcons = (f) => {
  this.icons.find(f)
}

I'm passing in a file extension(jlr, trr, or bpx) and I want the path to that icon returned.

Is there a way to do this in react/es6?

Thanks!

export default instead of export

Jordan Soltman
– Jordan Soltman

2018-07-13 19:41:07 +00:00
Commented Jul 13, 2018 at 19:41 — Jordan Soltman
– Jordan Soltman, Commented Jul 13, 2018 at 19:41

Ori Drori · Accepted Answer · 2018-07-13 20:17:43Z

2

The documentIcons is a named export, and should be imported as one:

import { documentIcons } from '/documentIcons'

The other option is to change the named export to a default export:

const documentIcons = (f) => {
    this.icons.find(f) // this error is handled below
}

export default documentIcons

You should also remove the this from the method, since icons is a constant in the scope, and not a property on the same object. An object doesn't have the find method, and you should use brackets notation to get the value, and then return it:

const documentIcons = (f) => icons[f]

edited Jul 13, 2018 at 20:17

answered Jul 13, 2018 at 19:41

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

1 Comment

SkyeBoniwell Over a year ago

Hi thanks, that took care of the 1st error. No I'm seeing this: Uncaught TypeError: Cannot read property 'icons' of undefined for this line : this.icons.find(f)

devserkan · Accepted Answer · 2018-07-13 20:02:25Z

1

There are a couple of missing parts here.

First of all export your function with default or import it as a named one:

import { documentIcons } from "/documentIcons";

Second one, you can't use .map on an object. If you want to find the url with the object key, use it like this:

icons[f]

Third, your are not returning anything from your function. Use it like this:

export const documentIcons = (f) => icons.[f];

This is a shorthand for:

export const documentIcons = (f) => {
    return icons.[f]
}

edited Jul 13, 2018 at 20:02

answered Jul 13, 2018 at 19:49

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

error when trying to get value from function in react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related