Render ListView with hyper link navigation in React ListView component

23 Jan 20256 minutes to read

We can use anchor tag along with href attribute in the ListView template property for navigation.

In the example below, we have rendered a ListView with search engine URLs as hyperlinks.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    //Define an array of JSON data
    let dataSource = [
        { name: 'Google', url: 'https://www.google.com' },
        { name: 'Bing', url: 'https://www.bing.com' },
        { name: 'Yahoo', url: 'https://www.yahoo.com' },
        { name: 'Ask.com', url: 'https://www.ask.com' },
        { name: 'AOL.com', url: 'https://www.aol.com' }
    ];
    function anchor_template(data) {
        return (<a target='_blank' href={data.url}>{data.name}</a>);
    }
    ;
    return (<ListViewComponent id='list' dataSource={dataSource} headerTitle='Search engines' showHeader={true} template={anchor_template}>
    </ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {

    //Define an array of JSON data
    let dataSource: { [key: string]: Object }[] = [
        { name: 'Google', url: 'https://www.google.com' },
        { name: 'Bing', url: 'https://www.bing.com' },
        { name: 'Yahoo', url: 'https://www.yahoo.com' },
        { name: 'Ask.com', url: 'https://www.ask.com' },
        { name: 'AOL.com', url: 'https://www.aol.com' }
    ];

    function anchor_template(data: any): JSX.Element {
        return (
            <a target='_blank' href={data.url}>{data.name}</a>
        )
    };

    return (
        <ListViewComponent id='list'
            dataSource={dataSource}
            headerTitle='Search engines'
            showHeader={true}
            template={anchor_template as any} >
        </ListViewComponent>
    )
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue', 'calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#list {
  display: block;
  max-width: 350px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}

#list a {
  text-decoration: none;
}

#list .e-list-header {
  background: rgb(2, 120, 215);
  color: white;
  font-size: 19px;
  font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>