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, Mar 12 '19 at 16:48
Check this out, I created a working demo resolving your issue — Ravi Patel, Mar 12 '19 at 16:56

Maheer Ali · Accepted Answer · 2019-03-12T16:55:52.520

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 '19 at 16:55

answered Mar 12 '19 at 16:49

Maheer Ali

35,834
5
42
73

@soldfor see I have updated. Actually you are missing two `return` statements – Maheer Ali Mar 12 '19 at 16:51
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. – letsCode Mar 12 '19 at 16:52
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`. – Subhendu Kundu Mar 12 '19 at 16:55
@soldfor I have added explanation why you need `return` – Maheer Ali Mar 12 '19 at 17:00

score 0 · Answer 2 · answered Mar 12 '19 at 17:03

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.

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. — Bhojendra Rauniyar, Mar 12 '19 at 17:05

array mapping not returning value react

2 Answers2