title: I need help to automatically display a method in a react class
body: <p>So im having a trouble developing a card for my whole react-app, and it is a huge one:</p>
  
  <p>I have these 5 props,all of them contains strings from a Multi dimensional Json array:</p>
  
  <pre><code>{this.props.noticia.titulo}
  {this.props.noticia.imagen}
  {this.props.noticia.categoria}
  {this.props.noticia.parrafo}
  </code></pre>
  
  <p>and i use bootstrap cards to print the information on the Virtual Dom.
  the deal is that i use a button and a collapse to show the prop parrafo when clicked: </p>
  
  <pre><code>{this.props.noticia.parrafo}
  </code></pre>
  
  <p>and then the whole page loads showing all the text,instead of hiding it and then, when clicked  (a double click) the text hides. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>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{
  
  //     render(){
  //         return &lt;table key={gists.noticia.id}&gt;
  //         &lt;tbody&gt;
  //           &lt;tr&gt;
  //             &lt;td&gt;
  //               &lt;img alt="poster" width="120" src= {gists.noticia.imagen}/&gt;
  //             &lt;/td&gt;
  //             &lt;td&gt;
  //               &lt;h3 id="titulos"&gt;{gists.noticia.titulos}&lt;/h3&gt;
  //               &lt;p&gt;{gists.noticia.parrafo}&lt;/p&gt;
  //             &lt;/td&gt;
  //           &lt;/tr&gt;
  //         &lt;/tbody&gt;
  //       &lt;/table&gt;
  //     }
  // }
  
  class MovieRow extends React.Component {
    constructor(sufrimiento) {
      super(sufrimiento);
      this.state = {
        gists: null,
        news: this.props
      };
      this.dolor = this.dolor.bind(this);
    }
  
    dolor() {
      var coll = document.getElementsByClassName("collapsible");
      var i;
  
      for (i = 0; i &lt; 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 (
        &lt;Router&gt;
          &lt;Card style={{ width: "18rem" }} key={gists.noticia.id}&gt;
            &lt;Card.Img variant="top" src={gists.noticia.imagen} /&gt;
            &lt;Card.Body&gt;
              &lt;Card.Title&gt;{gists.noticia.titulo}&lt;/Card.Title&gt;
              &lt;Button
                variant="outline-dark"
                className="collapsible"
                onClick={this.dolor}
              &gt;
                Mas información
              &lt;/Button&gt;
              &lt;div className="content"&gt;
                &lt;p&gt;{gists.noticia.parrafo}&lt;/p&gt;
              &lt;/div&gt;
            &lt;/Card.Body&gt;
          &lt;/Card&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default MovieRow;
  </code></pre>