CODEWITHSUNDEEP
javascriptreactjsecmascript-6arrow-functions
londonfed
londonfed

Reputation: 1230

One line Arrow function, return multiple

I am using ReactJS and I am having trouble getting an arrow function to return multiple functions.

I have a one line arrow function on an onLoad event:

<iframe onLoad={() => (this.handleFrame && this.setState({loadingComplete: true}))}></iframe>

The above code does not work. How I can return both this.handleFrame & this.setState({loadingComplete: true}) on one line of code?

Upvotes: 0

Views: 3979

Answers (3)

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

Your question is wrong. You cannot return two items at once.

Your code is checking for this.handleFrame, if that is available, this.setState({loadingComplete: true}) will be executed and the value will be returnrd. If this.handleFrame is not available, it will return undefined.

If you want to execute multiple functions, you can do the following.

<iframe onLoad={() => ((this.handleFrame() || true) && this.setState({loadingComplete: true}))}></iframe>

If you return true for this.handleFrame(), you don't need a || check.

If you want to return multiple functions, you can do the following.

<iframe onLoad={() => {handleFrame: this.handleFrame, state: this.setState({loadingComplete: true})}}></iframe>

Upvotes: 1

nanobar
nanobar

Reputation: 66355

You forgot to call this.handleFrame:

<iframe onLoad={() => (this.handleFrame() && this.setState({loadingComplete: true}))}></iframe>

Note that this will call both functions, but it will return a boolean (true if both functions return a truthy result, otherwise not)

Also note that if your first function does not return truthy, the next function will not be called!

If you want to call all functions regardless of if they return truthy, and don't care about returning a result then do:

<iframe onLoad={() => { this.handleFrame(); this.setState({loadingComplete: true}) }}></iframe>

Upvotes: 1

Hoang Do
Hoang Do

Reputation: 335

You can try this

<iframe onLoad={() => ({val1: this.handleFrame(), val2: this.setState({loadingComplete: true})})}></iframe>

It will return an object with two values.

Upvotes: 3

Related Questions