CODEWITHSUNDEEP
javascriptreactjsuser-interface
userrj_vj_051620
userrj_vj_051620

Reputation: 201

How do we iterate all the names in return statement and get hyperlinks for each names

I have to populate dNames in UI and add hyperlink to dNames. I have tried to iterate this line return (<a href='#' onClick={(e) => this.handleProfile(rowContent, row)}>{val}) but it does not work. Currently it's taking as single hyperlink to all the dNames. But I want to iterate and should be able to hit on separate dNames hyperlink.

Sorry bad at explaining the issue since I am new to UI.

I have to iterate this line return (<a href='#' onClick={(e) => this.handleProfile(rowContent, row)}>{val}) so that we get hyperlinks to each dNames and it will navigate to details page.

{
          dataField: 'pName',
          text: 'NAME',
          sort: true,
          formatter: (rowContent, row) => {
            let dNames = row.pDevName;
            let dNamesArr = dNames.split('\n')
            const dList = dNamesArr.map((dev) => <p className='text-ellipsis' key={dev}>{dev}</p>)           
            dNamesArr.map((val)=>{
              return (<span className="font-bold"><a href='#' onClick={(e) => this.handleProfile(rowContent, row)}>{val}</a></span>)
              })
          },
          events: {
            onClick: (e, column, columnIndex, row, rowIndex) => {
              this.handleProfile(columnIndex, row)
            }
          }
        }

Upvotes: 0

Views: 25

Answers (1)

Zunayed Shahriar
Zunayed Shahriar

Reputation: 2743

Adding a break will solve your issue.

Your return statement should be:

return <span className="font-bold">
    <a href='#' onClick={(e) => handleProfile(rowContent, row)}>
        {val}
    </a>
    <br/>
</span>;

Result:

enter image description here

Demo at CodeSandbox.

Upvotes: 0

Related Questions