How to map inside of the map component?

Question

There is a return statement that map inside of array and return some data. What if in category there is another array and for correct data it should be another map in category={item.category}. What the best solution to organize this? Thanks.

  <div className="portfolio__container">
      {projects.map((item, key) =>
        item.filtered === true ? (
          <div>
            <ProfileCard
              key={key}
              name={item.name}
              title={item.title}
              image={item.image}
              className="border-box"
              exerpt={item.exerpt}
              git={item.git}
              url={item.url}
              category={item.category}
              click="Push"
              sans-serif
              mb0-l
              mb3
              flex-none
              w5
              mr3
            />
          </div>
        ) : (
          ""
        )
      )}
    </div>

data

{
  name: `object`,
  title: `3 title`,
  image: `photo-2.jpg`,
  exerpt: `some 3 project`,
  git: `https://github.com/desmukh/gatsby-starter-woo/tree/master/`,
  url: `https://www.gatsbyjs.com/plugins/gatsby-plugin-smoothscroll/`,
  category: ["all23423423", "mobile", "ux-ui", "others"],
},

Component style

export const ProfileCard = ({
  name,
  title,
  click,
  exerpt,
  image,
  git,
  url,
  category,
  ...props
}) => (
  <Card {...props}>
    <Box tc>
      <Avatar src={image} title={`Photo of ${name}`} dib />
      <Button href={git}> {click}</Button>
      <Button href={url}> {click}</Button>
      <Heading level={2} f3 mb2>
        {name}
      </Heading>
      <Text f5 fw4 gray mt0>
        {exerpt}
      </Text>
      <Text>{category}</Text>
    </Box>
  </Card>
);

Answer 1

This can be a possible solution. This will render correctly if category is string or array.

    export const ProfileCard = ({
  name,
  title,
  click,
  exerpt,
  image,
  git,
  url,
  category,
  ...props
}) => {
 const renderCategory = () => {
   if(Array.isArray(category)){
     return (<>{
         category.map(cat => <Text>{cat}</Text>);
     }</>);
   } 
    return <Text>{category}</Text>;
 }

 return (<Card {...props}>
    <Box tc>
      <Avatar src={image} title={`Photo of ${name}`} dib />
      <Button href={git}> {click}</Button>
      <Button href={url}> {click}</Button>
      <Heading level={2} f3 mb2>
        {name}
      </Heading>
      <Text f5 fw4 gray mt0>
        {exerpt}
      </Text>
      {renderCategory()}
    </Box>
  </Card>)
};