Why is this map in react not rendering?

Question

I have the following map in my render section.

  <div className="o-grid u-space-top-2 u-space-bottom">
       
      {/* {this.printBoxes(empresa).map(i => {
        console.log("?¿?¿?¿")
        console.log(i)
      })} */}
    {this.printBoxes(empresa).map( i => {
      (<div className={`o-grid__col u-12 u-12@xs u-${i.colSize}@xl u-space-bottom`}>
        <FileModuleBox
          shadow
          compact
          equalHeight
          child={[{
            liConfig: { icon: true },
            childIconProps: { icon: i.icon },
            subtitle: i.subtitle,
            body: i.body
          }].map((i, ix) => (
            <ListItemIcon key={ix}
              {...i} />
          ))}
        />
      </div>)

      })} 

      </div>

But its rendering nothing

printBoxes function is the one below, its basically composes an array of objects

    printBoxes(empresa){
        let obj: any = []
        if(empresa.ultimaInformacionDisponible.ultimaActualizacion){
          obj.push({
            icon: "u-icon-buildings-gran",
            subtitle: "Actividad representativa",
            body: empresa.ultimaInformacionDisponible.ultimaActualizacion,
            colSize: 3
          })
        }
        if(empresa.ultimaInformacionDisponible.balanceIndividual.fechaUltimoBalance){
          obj.push({
            icon: "u-icon-buildings-gran",
            subtitle: "Balance individual (" + 2 + ")",
            body: empresa.ultimaInformacionDisponible.balanceIndividual.fechaUltimoBalance,
            colSize: 3
          })
        }
        if(empresa.ultimaInformacionDisponible.tamanoVentas){
          obj.push({
            icon: "u-icon-buildings-gran",
            subtitle: "Tamaño de ventas",
            body: empresa.ultimaInformacionDisponible.tamanoVentas,
            colSize: 3
          })
        }
    
        if(obj.length === 3){
          for(let i in obj){
            obj[i].colSize = 4
          }
        }else{
          for(let i in obj){
            obj[i].colSize = 12
          }
        }
        console.log(obj)
/*[
{icon: "icon", subtitle: "subtitle", body: "body", colSize: 3},
{icon: "icon2", subtitle: "subtitle2", body: "body2", colSize: 3},
{icon: "icon3", subtitle: "subtitle3", body: "body3", colSize: 3},
]   */
        return obj
      }

The console.log is the object that im supposed to render, but it doesnt show anything so im not sure why isnt it working if theres an object to map in the render

Answer 1

You have to return the result inside the map

{this.printBoxes(empresa).map( i => {
      return (<div className={`o-grid__col u-12 u-12@xs u-${i.colSize}@xl u-space-bottom`}>
        <FileModuleBox
          shadow
          compact
          equalHeight
          child={[{
            liConfig: { icon: true },
            childIconProps: { icon: i.icon },
            subtitle: i.subtitle,
            body: i.body
          }].map((i, ix) => (
            <ListItemIcon key={ix}
              {...i} />
          ))}
        />
      </div>)

      })}