React Component doesn't print on map function-CodePudding

This component doesnt print on a map function, I seted a console.log inside to be sure that the loop iterates and its iterating but nothing is printed

import React from 'react';
import TherapeuticResultElement from "./TherapeuticResultElement"


function TherapeuticResult() {
    return (
        <div>
            <div className="card shadow py-2 mb-4">
                <div className="card-body">
                    <div id="">
                        <div className="">
                            <div className="row">
                                {
                                    window.COMPOSITE_CATEGORIES.map((category) => {
                                       if(category.composites.length > 0){
                                           console.log(category);//info is shown on console
                                            <div>AAAAAAA</div>
                                       }
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )

}

export default TherapeuticResult;

CodePudding user response：

use

{
    window.COMPOSITE_CATEGORIES
    .filter(category=>category.composites.length > 0)
    .map((category) => {
          console.log(category);//info is shown on console
          return (
                  <div>AAAAAAA</div>
          );
    })
}

instead of

{
    window.COMPOSITE_CATEGORIES.map((category) => {
      if(category.composites.length > 0){
          console.log(category);//info is shown on console
            <div>AAAAAAA</div>
        }
    })
}

CodePudding user response：

You need the return in your code. Try putting this way:

import React from 'react';
import TherapeuticResultElement from "./TherapeuticResultElement"


function TherapeuticResult() {
    return (
        <div>
            <div className="card shadow py-2 mb-4">
                <div className="card-body">
                    <div id="">
                        <div className="">
                            <div className="row">
                                {
                                    window.COMPOSITE_CATEGORIES.map((category) => {
                                       if(category.composites.length > 0){
                                           console.log(category);//info is shown on console
                                           return (
                                             <div>AAAAAAA</div>
                                           )
                                       } else {
                                        // Add your else block with "return (<code>)"
                                       }
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )

}

export default TherapeuticResult;

CodePudding user response：

Your Array.map() callback function needs to return a value, in your case it should be like this:

<div className="row">
  {
      window.COMPOSITE_CATEGORIES.map((category) => {
         if(category.composites.length > 0){
             console.log(category);//info is shown on console
              return (<div>AAAAAAA</div>)
         }
      })
  }
</div>