Props not rendering for storybook component

Question

I have a component that will take an array of objects and will render a grid of lists

//Awards

import React from "react";
import MarkDown from "components/Design/MarkDown";
import { Grid } from "components/Design/Grid/Grid";

export const Awards = ({ list }) => {
  return (
    <Grid>
      {list
        .sort((a, b) => b.year - a.year)
        .map((award) => (
          <div
            key={award.id}
            className="flex flex-col gap-16 font-mulish col-span-4">
            <h3 className="font-bold text-14-24 text-gray-dark">
              {award.year}
            </h3>
            <div className="text-14-24 text-gray-text">
              <MarkDown>{award.description}</MarkDown>
            </div>
          </div>
        ))}
    </Grid>
  );
};

When I try to write a story for the component, I get a warning TypeError: Object(...) is not a function. After several refresh I get Cannot access 'Awards' before initialization

//Awards.stories.jsx
import React from "react";
import { Awards } from "components/Awards";

export default {
  title: "component/Awards",
  component: Awards,
};

const list = [
  {
    id: 1,
    year: 2018,
    description:
      "- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
  {
    id: 2,
    year: 2017,
    description:
      "- Lorem ipsum dolor sit amet\n\n - consectetur adipiscing elit.",
  },
  {
    id: 3,
    year: 2016,
    description:
      "- Lorem ipsum dolor sit amet\n\n - consectetur adipiscing elit.",
  },
  {
    id: 4,
    year: 2015,
    description:
      "- Lorem ipsum dolor sit amet\n\n - consectetur adipiscing elit.",
  },
  {
    id: 5,
    year: 2014,
    description: "- Lorem ipsum dolor sit amet",
  },
];

export const AwardsBlock = () => {
  return <Awards list={list} />;
};

While debugging I found that if replace the part

{list
        .sort((a, b) => b.year - a.year)
        .map((award) => (
          <div
            key={award.id}
            className="flex flex-col gap-16 font-mulish col-span-4">
            <h3 className="font-bold text-14-24 text-gray-dark">
              {award.year}
            </h3>
            <div className="text-14-24 text-gray-text">
              <MarkDown>{award.description}</MarkDown>
            </div>
          </div>
        ))}

with something static

<span>——</span>

It works like a charm. Maybe something to do with lists throwing some error or not rendering. What am I missing here?

Answer 1

Did you mean to do a named import for the Markdown component? As in

import {MarkDown} from "components/Design/MarkDown";

instead of

import MarkDown from "components/Design/MarkDown";