如何制作独立的卡片组件？

Question

我需要一个单独的Card组件，该组件将显示从父级（帖子）传递来的名称，标题和图像零件。我正在创建一个“ Instagram克隆”，其中将用户信息和图像显示为后续帖子onSubmit。

如何将图像读取为状态并将其传递给Card组件？ Repo。

卡组件：

const Card = props => (
  <div className="card-mb-3">
    <div className="card-body">
      <p className="card-title">
        <span>Username: </span>
        {props.info.name}{' '}
      </p>
      <p className="card-text">
        <span> caption:</span>
        {props.info.caption}
      </p>
    </div>
    <div className="card-post">
      <p className="card-post">
        <span>Post:</span>
        {props.info.file}{' '}
      </p>
    </div>
  </div>
)

快照：