1

I've got a MyFirstPage.js file which is something like this:

renderCards() {
  let icon = this.state.icon;
  ....
  ....
  ....
}

Which i write to render my cards inside my main render function! The point is, because it's getting too long (about 350 lines), i want to create another file and import this renderCards() AS TEXT so i can i have it in the MyFirstPage.js main render! Please note that let icon = this.state.icon; which refer to the MyFirstPage.js state - so i have to import it AS TEXT.

I tried:

export default {
  renderCards() {
      ....
      ....
      ....
      }
}

but not working!

Any idea?

Thanks in advance!

7
  • export default renderCards() {} should do the trick Commented Aug 3, 2018 at 22:51
  • @spakmad did you note that let icon = this.state.icon;? Commented Aug 3, 2018 at 22:53
  • Yeah read that too quickly. How about this: export default class RenderCards extends Component { render = () => { // pass whatever was originally state as a prop now. } Commented Aug 3, 2018 at 22:57
  • @spakmad So you mean i can create another component and use props! No way to import a file as text then? Commented Aug 3, 2018 at 22:59
  • I see now why your question indicates you'd like to import the method as text. What is the rest of the renderCards method? Is it all JSX? Why not create a function that does what you need it to do with the icons, returning JSX, put that function in another file, import it in MyFirstPage.js and call it providing the icons as an argument from this.state Commented Aug 3, 2018 at 23:05

1 Answer 1

1

You can define code in a string and execute it in Javascript. We can use eval() to evaluate a String as a piece of code. This approach has a security, reliability, and performance concerns because eval can essentially inject code into your script, and that code is simply determined by what String is passed to it. That said, most Babel transpiling presets use strict mode, and this limits eval to some extent by ultimately not allowing it to instantiate new variables in the surrounding scope. What it can still do, is define a function and evaluate that function and assign it to a variable in the external scope like so:

var a = 5
var b = 10
var c = eval('function abc() { return a + b }; abc;')
assert(c() === 15)

With this ability in hand, we can wrap your entire 'renderCards' function definition in a String (by way of template literal):

export default `renderCards() {
  let icon = this.state.icon;
  ....
  ....
  ....
}; renderCards;`

Import this string (import renderCardsImport from {relative path to file} in the react component MyFirstPage.js, and in the constructor you need to do a few things:

constructor(props){
   super(props)
   this.state = {
      icon: // whatever this is
   }
   let renderCards = eval(renderCardsImport)
   // so you have access to the parent class object this
   this.renderCards = renderCards.bind(this)
}

And now you should be able to call renderCards() in the render() method or anyplace else in the component. Phewww. That was a doozy, but learned so much about eval, strict mode, etc. Hope it helps.

EDIT: You can also use the Function constructor it appears, as in var myFunct = Function('body of function with a return statement') but you will need to remember to bind it to this as well. If you use Function, you avoid performance and security hit of eval. Strict mode takes away most of the reliability problems.

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

3 Comments

could you please give me an example?
I learned a bunch here. I updated answer with a working solution. Let me know if it works.
really thanks for your answer BUT i get SyntaxError: Unexpected token '{' - and it's pointing to this line: let renderCards = eval(renderCardsImport)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.