Build a Reusable Footer - Build a Reusable Footer

Tell us what’s happening:

i only pass tests 6 and 10. can’t seem to pass the rest no matter what i try

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Reusable Footer Component</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { Footer } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<Footer />);
    </script>
  </body>
</html>
/* file: styles.css */

/* file: index.jsx */
export default function Footer() {
  return (
    <footer>
      <ul>
        <li>About</li>
        <li>Careers</li>
      </ul>

      <ul>
        <li>Blog</li>
        <li>Press</li>
      </ul>

      <ul>
        <li>Support</li>
        <li>Contact</li>
      </ul>

      <p>&copy; 2026 MyCompany</p>

      <a href="#">Twitter</a>
      <a href="#">Instagram</a>
      <a href="#">LinkedIn</a>
    </footer>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Build a Reusable Footer - Build a Reusable Footer

If you want to import “Footer” as a named import, you should remove the “default” keyword from the export.

1 Like

it should be a named export, not default export

thank you so much. it passed

thank you. it passed