The root cause of the problem is due to return statement being inside an if condition.
This means that the function will return only when the condition is true.
The behaviour for condition being false also must be defined in order to resolve the issue.
This can be achieved in 3 ways:
Add a filter to obtain only the interesting values in the map (Recommended)
Add an else block to return something when condition fails
or by adding an explicit return at the final line of the code block.
Here is an example of the suggested change:
Option 1: Add a filter to get a map of interesting values only (recommended)
Object.keys(_.get(order, "customer", {}))
.filter(
(interestingValue) => (
interestingValue !== "defaultOption" &&
customer[interestingValue] !== ""
)
)
.map(
(key) => (
<option key={key} value={key}>
{_.startCase(key)}
</option>
)
)
Option 2: Add an else block
Object.keys(_.get(order, "customer", {}))
.map( (key) => {
if (key !== "defaultOption" && customer[key] !== "") {
return (
<option key={key} value={key}>
{_.startCase(key)}
</option>
)
} else {
return (
<div>condition failed</div>
)
}
}
)
Option 3: Add an explicit return at the end of the block
Object.keys(_.get(order, "customer", {}))
.map( (key) => {
if (key !== "defaultOption" && customer[key] !== "") {
return (
<option key={key} value={key}>
{_.startCase(key)}
</option>
)
}
return undefined
}
)