Struggling to develop a card for my react-app that contains 5 props holding strings from a Multi-dimensional Json array. Using bootstrap cards to display the information on the Virtual Dom, but facing an issue with showing and hiding text:
{this.props.noticia.titulo}
{this.props.noticia.imagen}
{this.props.noticia.categoria}
{this.props.noticia.parrafo}
To show the prop 'parrafo' when clicked, I utilize a button and collapse functionality, but currently experiencing a problem where the entire page loads showing all the text at once, instead of initially hiding it and then revealing it only upon double-click.
Below is the code snippet in question:
import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import Card from "react-bootstrap/Card";
import { Button, Collapse } from "react-bootstrap";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
class MovieRow extends React.Component {
constructor(props) {
super(props);
this.state = {
gists: null,
news: this.props
};
this.toggleContent = this.toggleContent.bind(this);
}
toggleContent() {
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
}
render() {
const gists = this.props;
return (
<Router>
<Card style={{ width: "18rem" }} key={gists.noticia.id}>
<Card.Img variant="top" src={gists.noticia.imagen} />
<Card.Body>
<Card.Title>{gists.noticia.titulo}</Card.Title>
<Button
variant="outline-dark"
className="collapsible"
onClick={this.toggleContent}
>
More Information
</Button>
<div className="content">
<p>{gists.noticia.parrafo}</p>
</div>
</Card.Body>
</Card>
</Router>
);
}
}
export default MovieRow;