Breadcrumb react code not working, how can i fix it?

Question

So, I've tried setting up a component that creates breadcrumbs for React.

The code is here:

https://codesandbox.io/s/dreamy-microservice-mjxg2?fontsize=14

The error it's bringing back is that I'm mishandling the props.children.map, may any of you tell me why or how to fix it?

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Breadcrumb = ({props}) => {
  const list = props.children.map((item) => (<li>{item}</li>));
  return (
    <ul>{list}</ul>

}:

const BreadcrumbItem = ({href, name}) => <div>{name}</div>;

function App() {
  return (
    <div className="App">
     <Breadcrumb>
      <BreadcrumbItem 
          href="/dashboard"
          name="Dashboard"
      />
      <BreadcrumbItem 
          href="/brand"
          name="Brands"
      />
      <Breadcrumb 
          href="/brand/new"
          name="New brands"
      />
  </Breadcrumb>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Change this:

const Breadcrumb = ({props}) => 

with

const Breadcrumb = (props) =>

Also, there is a typo in the App component. The last children is Breadcrumb , it should be BreadcrumbItem .

---

Working code is below:

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Breadcrumb = (props ) => {
  const list = props.children.map(item => <li>{item}</li>);
  return <ul>{list}</ul>;
};

const BreadcrumbItem = ({ href, name }) => <div>{name}</div>;

function App() {
  return (
    <div className="App">
      <Breadcrumb>
        <BreadcrumbItem href="/dashboard" name="Dashboard" />
        <BreadcrumbItem href="/brand" name="Brands" />
        <BreadcrumbItem href="/brand/new" name="New brands" />
      </Breadcrumb>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);