Estoy trabajando en un proyecto donde obtendré una lista de datos de documentos. La matriz de documentos es la siguiente

 [{ 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 }].

Logré mostrar elementos de la matriz de documentos como una vista de lista en la interfaz de usuario usando 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> ); };

Mi pregunta es

Cuando alguien hace clic en 'título' que he envuelto con una etiqueta de anclaje, debería crear una nueva página HTML con un resumen como contenido.

¿Cómo debo lograr esto?