Unable to get JSX to render from a condition within map() function

Question

There are quite a few questions and answers on this topic out there already, but I don't seem to get my JSX to render properly from a condtion within a map() function.

The function I am calling from my render() function looks like this:

renderAudiobookChoice(audioBookChoice) {
  if (audioBookChoice === "all") {
    return this.state.audiobooks.map(audiobook => (
      <AudiobookDetail key={audiobook.id} audiobook={audiobook} />
    ));
  }

  if (audioBookChoice === "poetry") {
    this.state.audiobooks.map(audiobook => {
      return audiobook.text_type === 2 ? (
        <AudiobookDetail key={audiobook.id} audiobook={audiobook} />
      ) : null;
    });
  }
}

So if my audioBookChoice = 'all', the AudiobookDetails are rendered properly. But if I audioBookChoice = 'poetry', it does not render anything to the screen anymore.

My linter gives me the follwoing warning: "Expected to return a value at the end of arrow function. (array-callback-return)". This is confusing me, as I am under the impression that I should be returning something following my terniary operator.

Any help would be much appreciated.

Possible duplicate of [map doesn't return anything](https://stackoverflow.com/questions/45670326/es6-array-map-doesnt-return-anything-reactjs) — Mayank Shukla, Jul 10 '18 at 13:08

score 3 · Accepted Answer · answered Jul 10 '18 at 13:06

3

You're missing the the return in the poetry section:

if (audioBookChoice === 'poetry') {
    return (
      this.state.audiobooks.map(audiobook => {
        return audiobook.text_type === 2 ?
            <AudiobookDetail 
                key={audiobook.id} audiobook={audiobook} 
            />

        : 
            null;
        });
    }
  );
}

answered Jul 10 '18 at 13:06

Ted

14,757
2
41
58

Thanks so much for the quick help! – Maximilian A. Graves Jul 10 '18 at 15:06

score 2 · Answer 2 · answered Jul 10 '18 at 13:06

You are not returning the result inside of your second if statement.

if (audioBookChoice === "poetry") {
  return this.state.audiobooks.map(audiobook => {
    return audiobook.text_type === 2 ? (
      <AudiobookDetail key={audiobook.id} audiobook={audiobook} />
    ) : null;
  });
}

score 2 · Answer 3 · edited Jul 10 '18 at 14:57

2

Because you're not returning the map of the array anymore.

use this:

if (audioBookChoice === "poetry") {
  return this.state.audiobooks.map(audiobook => {
    return audiobook.text_type === 2 ? (
      <AudiobookDetail key={audiobook.id} audiobook={audiobook} />
    ) : null;
  });
}

edited Jul 10 '18 at 14:57

user229044

232,980
40
330
338

answered Jul 10 '18 at 13:07

Jorgedl

137
3

score 2 · Answer 4 · answered Jul 10 '18 at 13:08

You are missing return statement,change to

 if (audioBookChoice === "poetry") {
    return this.state.audiobooks.map(audiobook => {
      return audiobook.text_type === 2 ? (
        <AudiobookDetail key={audiobook.id} audiobook={audiobook} />
      ) : null;
    });
  }
}

Unable to get JSX to render from a condition within map() function

4 Answers4