array mapping not returning value react

Question

I have the following function

  churnModel = () => {
        if (this.props.churnModel === undefined || this.props.churnModel.length === 0) {
          return("N/A")
        } else {
          this.props.churnModel.map((churn) => {
            if (churn === undefined || churn.length === 0) {
              return("N/A")
            } else {
              return(churn.map((model) => {
                this.service(model.scoreModelId)
              }))
            }
          })
        }
  };

The this.service functions looks like this...

service(e) {
  switch(e.toString().toLowerCase()) {
    case "in":
      return <span>in</span>
    case "rpt_callr":
      return <span>repeat</span>
    default:
      return <span>na</span>
  }
}

I am expecting to display the result in here:

<div className="riskScore">{this.churnModel()}</div>

Nothing gets displayed, but when I put in logs, those get printed.

What is happening here?

You missed the return statement inside map. It should be return this.service(model.scoreModelId) — Ravi Patel
– Ravi Patel, Commented Mar 12, 2019 at 16:48
Check this out, I created a working demo resolving your issue — Ravi Patel
– Ravi Patel, Commented Mar 12, 2019 at 16:56

Maheer Ali · Accepted Answer · 2019-03-12 16:55:52Z

1

you need to put return before this.props.churnModel.map.this.service(model.scoreModelId)

A function will return undefined if nothing is nothing is returned.
map() takes a callback and changes each element of array to return value of the that callback. If you don't return anything all elements will be undefined

You can also get rid of return before this.service(model.scoreModelId) by removing {}.Like this.

return(churn.map((model) => this.service(model.scoreModelId)))

Here is the code

churnModel = () => {
        if (this.props.churnModel === undefined || this.props.churnModel.length === 0) {
          return("N/A")
        } else {
          return this.props.churnModel.map((churn) => {
            if (churn === undefined || churn.length === 0) {
              return("N/A")
            } else {
              return(churn.map((model) => {
                return this.service(model.scoreModelId)
              }))
            }
          })
        }
  };

edited Mar 12, 2019 at 16:55

answered Mar 12, 2019 at 16:49

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

4 Comments

Maheer Ali Over a year ago

@soldfor see I have updated. Actually you are missing two return statements

letsCode Over a year ago

the added return worked... why do I have to return this and that and that and even that? seems silly to "return" within a return.

Subhendu Kundu Over a year ago

So you can avoid adding return if you use a arrow function like return(churn.map((model) => this.service(model.scoreModelId))). These all are function, if you wanna have a value to the upper scope you need to return the value. I a way you are saying when I call you return me something.

Maheer Ali Over a year ago

@soldfor I have added explanation why you need return

Bhojendra Rauniyar · Accepted Answer · 2019-03-12 17:03:51Z

0

You have to use return statement in couple of lines:

 churnModel = () => {
            if (this.props.churnModel === undefined || this.props.churnModel.length === 0) {
              return("N/A")
            } else {
              return this.props.churnModel.map((churn) => {
                if (churn === undefined || churn.length === 0) {
                  return("N/A")
                } else {
                  return(churn.map((model) => {
                    return this.service(model.scoreModelId)
                  }))
                }
              })
            }
      };

Why do you need return? It's because you're using curly braces.

answered Mar 12, 2019 at 17:03

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

1 Comment

Bhojendra Rauniyar Over a year ago

Whoa, I'm too late to answer just to give proper format to return statement with bold. Learnt how to add bold in formatted code anyways.

Collectives™ on Stack Overflow

array mapping not returning value react

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related