Reactjs 如何从firebase db加载带有react的数据

嗨，我的问题是，当用户单击按钮时，如何从firebase db加载数据。 我希望“数据”段落仅在用户单击“更多信息”按钮时显示，并在再次单击时隐藏它。 以下是我的产品组件代码，如有任何建议，将不胜感激：

import React from 'react'
import './Css/Product.css'


function Product({name , price , image, data,}) {

  
  return (
    <div>
      <div className="product">
      <div className="product__info">
       <h3>{name}</h3>
       <button className="product__button">More info...</button>  
       <p>{data}</p>
       <p className="product__price">
       <small>₪</small>
       <strong>{price}</strong>
       </p>
      </div>
      <img src={image} atl="img"/>
    </div>
    </div>
  )
}

export default Product

从“React”导入React
导入“./Css/Product.Css”
函数产品（{名称、价格、图像、数据，}）{
返回(
{name}
更多信息。。。
{data}


₪
{price}

)
}
导出默认产品