I am working on populating source code from GitHub. There is a condition that if source code has any problems/issues, there might or might not be a code recommendation string. The code recommendation string is usually shown just below the problems/error code, to provide the user with some code suggestions.

here is the code snippet:

--
--Some code-
---
return (
   <>
      <tr>
          -----
         --some code---
          -----
        -----
        </tr>
         {
                                                        
          (problemAtLine !== null && problemAtLine.end_lineno === curLineNum &&
             problemAtLine.recommendation && problemAtLine.recommendation.length && 
             this.props.viewModeDetails === "problems") && (
                                                                
         (problemAtLine.recommendation).forEach((recommendationStr, index) => {

          return (
             <tr key={`${"ln-cr"}-${problemAtLine.lineno + index + 1}`}>
                                                                            
            <td className="lineicon"></td>
            <td key={`ln-cr-${problemAtLine.lineno + index}`} className="linenum">
            {problemAtLine.lineno + index}</td>
            <td key={`lc-cr-${problemAtLine.lineno + index}`} className= 
 {`selcodeline-${this.props.viewModeDetails}`}>

            {(() => {
                if (index === 0) {
                    return (
                            <div className="code-recommendation-bg-selected-start"></div>
                    );
                }
                else if (index === problemAtLine.recommendation.length - 1) {
                    return (
                            <div className="code-recommendation-bg-end"></div>
                    );
                } else {
                        return (
                                <div className="code-recommendation-bg-middle"></div>
                        );
                }
        })()}
                                                                                 
            <Highlight className="python">
                                                                                     
                  {recommendationStr !== "" ? recommendationStr: " "}
            </Highlight>
        </td>

        </tr>
    )
})
)}
</>
)
                                                                

Can anyone tell me what I'm missing? Thanks in Advance