Блог

Я изучаю учебник по 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 amp;amp;
    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;