Bug: Fixed “Go to Project” button not working

[hc-codes]

Fixes: #535

[hc-codes]

@Roshanjossey please review this PR, Fixed the Go to project button not working scenario when open issues are there in the card.

[Esh07]

You do not need to create another <a> tag to wrap <span> tag.

The main issue is that when loadIssues evaluates to true, it renders a component containing another <a> tag. Since nested links are invalid HTML, this breaks the link structure.

[Esh07]

You do not need to create another <a> tag to wrap <span> tag.

The main issue is that when loadIssues evaluates to true, it renders a component containing another <a> tag. Since nested links are invalid HTML, this breaks the link structure.

Here is affected code

<div class="Card-Container">
  <a class="Card-Real-Link" href={projectLink} target="_blank">
    <div class="Card-Header">
//.   ......
    </div>
    <div class="Card-Body">
      {loadIssues && ( //  <----- when it's `loadIssues` evaluates true, it renders another list
        <IssueList projectLink={projectLink} projectName={name} />
//       |
//       |--> ## <IssueList /> container below code
//========---- <IssueList /> component code ---======
           <div class="Card-Issues">
//           ......
             {issues.length > 0 ? (
               <div class="Issues-List">
                 {issues.map((issue) => (
/**-------XXXXXX <a> become child of parent <a> ----------------------------
*                (it applies link to below list but it breaks hyperlinks after </a>   //  |
**/                                                                                   //  |
                   <a href={issue.html_url} target="_blank" class="Issue-Card">       //  |
//                    .....                                                           //  |
                     <div class="Issue-Content">                                      //  |
//                   .......                                                          //  |                                                                                                   
                      </div>                                                          //  |
                      <div class="Issue-Labels">                                      //  |
//                       ....                                                         //  | 
                     </div>                                                           //  |                                                                                                 
                   </a>                                                               //  |
// ----------------------------------------------------------------------------------------
                 )}
             </div>
//          ........
           )}
           </div>
//========---- End of <IssueList /> component code ---======
    </div>
// Since this renders after second `<a>` tag, it breaks the link even though it is still warped under the parent `<a>` tag. 
    <div class="Card-Link">
      <span>Go to Project</span>
    </div>
  </a>
</div>
     

[Esh07]

We need to have a discussion before moving forward with implementation, as this change impacts another component.

Here is discussion

• #535

[hc-codes]

I am not seeing the nesting here now, both are separate tags and this goto button is working

[Esh07]

My bad. You're correct I am overlook it. Changes looks good

[Roshanjossey]

Thank you for fixing this @hc-codes

Thank you for reviewing @Esh07 🚀