即使在传递属性后，RenderLeader组件也不会呈现

Question

我正在学习有关Reactjs的教程。该页面工作正常，但是所需的RenderLeader组件未显示在页面上。 （鉴于已将所有必需的组件导入到文件中）...在公司领导下，我的网页上显示了空白。

function RenderLeader({ leader }) {
  return (
    <Media list>
      <Link to={`/aboutus/${leader.id}`}>
        {" "}
        {/* Back Quotes not normal one `` */}
        <Media tag="li">
          <Media left top href="#">
            <Media object src={leader.image} alt={leader.name} />
          </Media>
          <Media body>
            <Media heading>{leader.name}</Media>
            <Media tag>{leader.designation}</Media>
            {leader.description}
          </Media>
        </Media>
      </Link>
    </Media>
  );
}

function About(props) {
  const leaders =
    props.leaders &&
    props.leaders.map((leader) => {
      return (
        <div key={leader.id} className="col-12 col-md-5 m-1">
          <p>Leader {leader.name}</p>
          <RenderLeader leader={leader} />
        </div>
      );
    });

  return (
    <div className="container">
      <div className="row">
        <Breadcrumb>
          <BreadcrumbItem>
            <Link to="/home">Home</Link>
          </BreadcrumbItem>
          <BreadcrumbItem active>About Us</BreadcrumbItem>
        </Breadcrumb>
        <div className="col-12">
          <h3>About Us</h3>
          <hr />
        </div>
      </div>
      <div className="row row-content">
        <div className="col-12 col-md-6">
          ........
        </div>
        <div className="col-12">
          .....
        </div>
      </div>
      <div className="row row-content">
        <div className="col-12">
          <h2>Corporate Leadership</h2>
        </div>
        <div className="col-12">{leaders}</div>
      </div>
    </div>
  );
}

export default About;