Search code examples
styled-componentsreact-typescript

React: Map does not give expected result

I am using React-typescript for my app. For styling I am using styled-components. I have created one global breadcrumbs components. When I am using the breadcrumbs components to parent components there will be couple links. after mapping the links it should display single links but I am getting combined links. This is how it looks like: This is how it looks like

My expected result is:

enter image description here

This is my parent component where I am importing my Breadcrumbs

      <BreadCrumb>
            <a href="#">check</a>
            <a href="#">this</a>
            <a href="#">out</a>
          </BreadCrumb>

This is my global Breadcrumb component

import React from "react";
import styled from 'styled-components'
export interface IBreadCrumb {
  direction?: "";
  children: JSX.Element[];
  onClick?: () => void;

}
export const BreadCrumb = ({ direction, children, onClick }: IBreadCrumb) => {

  return (
    <div>
      <Breadcrumbs>
        {
          children.map(i => //In here I am doing my mapping.
            <Crumb>
              <a href="#" onClick={onClick}>{children}</a>
            </Crumb>
          )
        }
      </Breadcrumbs>
    </div >
  )
}

const Direction = {
  right: "\\2192",
  left: "\\2190 ",
  slash: "/"
}


const Crumb = styled.li`
  display: inline-block;
  &:last-of-type:after {
    content: "";
    padding: 0;
  }
  a {
    color: grey;
    text-decoration: none;
    &:hover,
    &:active {
      text-decoration: underline;
    }
  }
`

const Breadcrumbs = styled.ul`
  list-style: none;
  padding: 0;
  & > li:after {
    content: "${Direction.right}";
    padding: 0 8px;
    color: grey
  }
`;
Solution

  • Should it not be e.g.:

    children.map((child, index) => 
  <Crumb>
    <a key="{index}" href="#" onClick={onClick}>{child}</a>
  </Crumb>
)