The Comment Component is returning data to a table. I want to add a functionality here is Click on description(row should work as link), it redirects to another page and will display only description details.
Table has only 3 columns description, severity, status.
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: "",
showingDetails: false,
};
}
componentDidMount(){
this.setState({pass:this.props.description});
}
handleClick() {
if (this.state.showingDetails) {
// *** Already showing details, just turn the flag off
this.setState({ showingDetails: false });
}else{
const result = window.confirm("Are you sure you want to view the details?");
if (result) {
// *** Set the flag
this.setState({ showingDetails: true });
}
}
}
render() {
const { showingDetails } = this.state;
const href = showingDetails ? "/issues/details" : "/issues";
return (
<>
{/* href={`/issues/details`} */}
<tr>
<td>
<a href={href} onClick={this.handleClick}>
{this.props.description}
</a>
</td>
<td>{this.props.severity}</td>
<td>{this.props.children}</td>
</tr>
{showingDetails ? <IssuesDetails pass={this.props.description} /> : null}
</>
);
}
}