У меня проблема с картами, React, реквизитом и Bootstrap

Question

По сути, я фильтрую сложный массив json, и он наливает мне эти 5 разных реквизитов

{this.props.noticia.id}
{this.props.noticia.titulo}
{this.props.noticia.imagen}
{this.props.noticia.categoria}
{this.props.noticia.parrafo}

, и я хочу сделать карту, показывающую некоторые из них.

Это мой код:

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import Card from "react-bootstrap/Card";
import { Button } from "react-bootstrap";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
import Collapse from "react-bootstrap/Collapse";

// class MovieRow extends React.Component{

//     render(){
//         return <table key={gists.noticia.id}>
//         <tbody>
//           <tr>
//             <td>
//               <img alt="poster" width="120" src= {gists.noticia.imagen}/>
//             </td>
//             <td>
//               <h3 id="titulos">{gists.noticia.titulos}</h3>
//               <p>{gists.noticia.parrafo}</p>
//             </td>
//           </tr>
//         </tbody>
//       </table>
//     }
// }

class MovieRow extends React.Component {
  state = {
    gists: null
  };

  render() {
    return (
      <Router>
        <Card style={{ width: "18rem" }} key={this.props.noticia.id}>
          <Card.Img variant="top" src={this.props.noticia.imagen} />
          <Card.Body>
            <Card.Title>{this.props.noticia.titulo}</Card.Title>
            <Button onClick={this.Example.bind(this)}>

            </Button>
          </Card.Body>
        </Card>
      </Router>
    );
  }

}
// this.props.onDelete(this.props.char)
// const Gist = ({ match }) => (
//   <Card.Text>
//     <Example />
//   </Card.Text>
// );

export default MovieRow;

Я хочу напечатать

{this.props.noticia.parrafo}

внутри функции свертывания Bootstrap следующим образом:

  state = {
    gists: null
  };

  render() {
    return (
      <Router>
        <Card style={{ width: "18rem" }} key={this.props.noticia.id}>
          <Card.Img variant="top" src={this.props.noticia.imagen} />
          <Card.Body>
            <Card.Title>{this.props.noticia.titulo}</Card.Title>
            <Button >
             <Exmple/>
            </Button>
          </Card.Body>
        </Card>
      </Router>

вызов этой функции

return ( <>
  <Button onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open} >
    Mas Información
  </Button>
  <Collapse in={open}>
    <div id="example-collapse-text">{this.props.noticia.parrafo}</div> 
  </Collapse>
</> );

Моя идея состоит в том, чтобы нажать кнопку, а затем показать этот реквизит.

Я ищу идеи с помощью карт. Это для школьного проекта.