I have a component comment.js and it contains this.props.description under <td>. I want to pass this (this.props.description) to issueDetails.js page. But I tried to set this description in this.state. Then I am passing but still not working. Only I want to pass {this.props.description}.

import React from "react";
import { Link } from "react-router-dom";
import IssuesDetails from "./issuesDetails";

export default class Comment extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      href1: "",
      pass: ""
    };
  }
  componentDidMount(){
    this.setState({pass:this.props.description});
  }
  handleClick() {
    var result = window.confirm("Are you sure you want to view the details?");
    if (result === true) {
      this.setState({href1:"/details"});
    } else {
      this.setState({href1:""});
    }
    return(
      <>
      {/* trying to pass here but failed */}
      <IssuesDetails pass1={this.state.pass} /> 
      </>
    )
  }
  render() {
    return (
      <>
        {/* href={`/issues/details`} */}
        <tr>
          <td>
            <a href={`/issues${this.state.href1}`} onClick={this.handleClick}>
              {this.props.description}
            </a>
          </td>
          <td>{this.props.severity}</td>
          <td>{this.props.children}</td>
        </tr>
        {/* <div>
          
        </div> */}
      </>
      
    );
  }
}

import React, { Component } from 'react'

export default class IssuesDetails extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
    <>
    
      <h1>Isssue Details</h1>
      <h2>Details: - {this.props.pass1}</h2></>
    )
  }
}