I am working on a project where I will get list of documents data. Document array is as below

[{
title : 'Math'
summary  : '<p>Math is great'<p>
id    : 1
},
{
title : 'Science'
summary  : '<p>Science is great'<p>
id    : 2
},{
title : 'Nature'
summary  : '<p>Nature is great'<p>
id    : 3
}]. 

I have achieved in displaying elements from document array as a Listview at UI using React js.

const discourse = function (props) {

    let recordDate=props.discourseObj.recordDate
    recordDate=new Date(recordDate).toDateString()

    return (
        <div className='discourse' >
            <div className='title'>
                <a href='' target="_blank" rel="noopener noreferrer">
                    {props.discourseObj.title}
                </a>
            </div>
            <div className='summary'> Answer : {props.discourseObj.summary}</div> 
            <div className='date'> Date : {recordDate}</div>
        </div>
    );

};

My Question is

When someone clicks on 'title' which I have wrapped with anchor tag it should create a new HTML Page with summary as content.

How should I achieve this