0

I'm studying in a tutorial on Reactjs. The page is working fine but the required RenderLeader component is not shown on the page. (Given that imported all the required components into the file)...Under Corporate Leadership, a blank space is rendered on my webpage.

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;
Mathiharan T
  • 1
  • Hi. Its kind of hard to see just from code whats not working. Maybe you could attach codesandbox/stackblitz example. This would help. – elpddev Nov 10 '20 at 06:59
  • Yes, here it is..... https://codesandbox.io/s/3bs18 And if you click on the About us page...you will see that there is nothing displayed under the Corporate Leadership. And if you open the Menu page and click on a dish you will find its showing some time error. How to solve this ? – Mathiharan T Nov 10 '20 at 09:47
  • Thats was much easier to see. You should put the specific error in the question. In the sandbox, if you look at the error, it brings you right to were it happens. Maybe the `comments.date` is not a valid string date? Because the error `Invalid time value` is given when you try to parse invalid string dates. – elpddev Nov 10 '20 at 14:31

0 Answers0