Divide name with symbol

index.js

export default (fullName: string) => (
  fullName.split(' ').map((item, index) => {
    return index === 1 ? `@${item}` : item;
  })
)

index.tsx

import React from 'react';
import { divideName } from '../../utils';

interface UserNameProps {
  fullName: string;
}

const UserName = (props: UserNameProps) => {
  const dividedName = divideName(props.fullName);

  return (
    <>
      {dividedName.map((name: string) => (
      <span key={name} className="user_name">
        {name}
        &nbsp;
      </span>
    ))}
    </>
  );
}

export default UserName;