ES6 arrow syntax returns function not value

Question

I'm creating a react component of subcomponents with:

const Miniviews = ({reducedArry}) => {
  Object.keys(reducedArry).map((applicationId) => {
    return (
      <div id={applicationId}>
        {reducedArry[applicationId].map(miniview => (
          <Miniview
            key={miniview.id}
            id={miniview.id}
            title={miniview.name}
            handleOpenButton={this.handleMiniviewOpenView}
            />)
        )}
      </div>
    )
  })
};
console.log(Miniviews);

and displaying it in the render method with

{ this.state.showViews      && <Miniviews reducedArry={reducedArry} /> }

however, the value of Miniviews is actually not the returned objects from the function, but the object itself. The console.log outputs:

function Miniviews(_ref) {
        var reducedArry = _ref.reducedArry;

        Object.keys(reducedArry).map(function (applicationId) {
          return _react2.default.createElement(
           …

How can I make it return what I expect, which is:

<div id="1">
<Miniview />
<Miniview />
</div>
<div id="2">
<Miniview / >
</div>

Answer 1

Two issues:

1. "the value of Miniviews is actually not the returned objects from the function" That's right, you're defining Miniviews as a function (an arrow function), and not calling it. To call it, you'd do Miniviews(relevantArgumentHere) after.

2. You're using a verbose arrow function, which means you need to use an explicit return. If you use a concise arrow function (without { after =>), the return is implicit.

Here's an example of a concise arrow function:

const f = () => "foo";

and the equivalent verbose:

const f = () => { return "foo"; };

So either concise:

const Miniviews = ({reducedArry}) => // Note no { here
  Object.keys(reducedArry).map((applicationId) => {
    return (
      <div id={applicationId}>
        {reducedArry[applicationId].map(miniview => (
          <Miniview
            key={miniview.id}
            id={miniview.id}
            title={miniview.name}
            handleOpenButton={this.handleMiniviewOpenView}
            />)
        )}
      </div>
    )
  })
; // And no } before the ; here
console.log(Miniviews(someArgumentHere));
//                   ^^^^^^^^^^^^^^^^^^----- calling the function

or verbose with return:

const Miniviews = ({reducedArry}) => {
  return Object.keys(reducedArry).map((applicationId) => {
// ^^-- note this return
    return (
      <div id={applicationId}>
        {reducedArry[applicationId].map(miniview => (
          <Miniview
            key={miniview.id}
            id={miniview.id}
            title={miniview.name}
            handleOpenButton={this.handleMiniviewOpenView}
            />)
          )}
      </div>
    )
  })
};
console.log(Miniviews(someArgumentHere));
//                   ^^^^^^^^^^^^^^^^^^----- calling the function

Answer 2

You never return anything from Miniviews function.

Try this:

const Miniviews = ({reducedArry}) => {
 return Object.keys(reducedArry).map((applicationId) => {
   return (
     <div id={applicationId}>
       {reducedArry[applicationId].map(miniview => (
         <Miniview
           key={miniview.id}
           id={miniview.id}
           title={miniview.name}
           handleOpenButton={this.handleMiniviewOpenView}
           />)
         )}
       </div>
     )
   })
 };