How To Use Colons In Const

New to react and I am trying to use a colon like so (within the return of ProfilePage.js):

<a class="uk-text">{user.attributes.custom:company_name}</a>

but its giving me this error:

Parsing error: Unexpected token, expected "}"

I am getting attributes from an AWS Cognito User Pool and I can successfully see the returned object if I log it to the console like so:

Object > 

custom:company_name: "apple"

custom:department: "dept"

custom:job_title: "title"

email: "[email protected]"

email_verified: false

family_name: "user"

given_name: "test"

locale: "location"

phone_number: "+18702831861"

phone_number_verified: false

sub: "guid"

I can get the family_name without issue:

<a class="uk-text">{user.attributes.family_name}</a>

but anytime I try the custom attributes with its colon, it throws the error.

Full ProfilePage.js code:

import React from "react";
import { API, graphqlOperation } from 'aws-amplify';

class ProfilePage extends React.Component {
  state = {
  };

  componentDidMount() {
    if (this.props.user) {

    }
  }

  render() {
    const { user } = this.props;
    console.log(user.attributes)

    const emailVerified = this.props.user.attributes.email_verified

    const company_name = user.attributes.custom:company_name; // ERROR occurs here

    return (
      <>
      <div class="container">
        <div class="uk-margin-medium-top">
            <ul class="uk-flex-center uk-tab">
                <li class="uk-active"><a>Profile Summary</a></li>
            </ul>
        </div>

        {/* Cards */}
        <div class="uk-section">
        <div class="[email protected] uk-grid-small uk-grid-match uk-grid">
          <div>
              <div class="uk-card uk-card-default uk-card-body">
                  <h3 class="uk-card-title">User</h3>
                  <p>
                  {/* Form */}
                  <form class="uk-form-stacked">

                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">User ID</label>
                        <div class="uk-form-controls">
                            <a class="uk-text-muted uk-link-reset">{user.attributes.sub}</a>
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">First Name</label>
                        <div class="uk-form-controls">
                            <a class="uk-text">{user.attributes.given_name}</a>
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Last Name</label>
                        <div class="uk-form-controls">
                          <a class="uk-text">{user.attributes.family_name}</a>
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Email <a class="uk-label uk-text-link">{emailVerified}</a></label>
                        <div class="uk-form-controls">
                          <input class="uk-input" id="form-stacked-text" type="text" placeholder={user.attributes.email} />
                        </div>
                    </div>
                  </form>
                  </p>
              </div>
          </div>
          <div>
              <div class="uk-card uk-card-primary uk-card-body">
                  <h3 class="uk-card-title">Company</h3>
                  <p>
                  {/* Form */}
                  <form class="uk-form-stacked">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Name</label>
                        <div class="uk-form-controls">
                        <a class="uk-text">{company_name}</a>
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Role</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Description</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
                        </div>
                    </div>
                  </form>
                  </p>
              </div>
          </div>
          <div>
              <div class="uk-card uk-card-secondary uk-card-body">
                  <h3 class="uk-card-title">Security</h3>
                  <p>
                  {/* Form */}
                  <form class="uk-form-stacked">
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Change Password</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Multi-Factor Authenication</label>
                        <div class="uk-form-controls">
                            <input class="uk-input" id="form-stacked-text" type="text" placeholder="Some text..." />
                        </div>
                    </div>
                    <div class="uk-margin">
                        <label class="uk-form-label" for="form-stacked-text">Delete Account</label>
                        <div class="uk-form-controls">
                            <button class="uk-button uk-button-primary">Delete Account Forever</button>
                        </div>
                    </div>
                  </form>
                  </p>
              </div>
          </div>
        </div>
        </div>

      </div>
      </>
    )
  }
}

export default ProfilePage;

I do not even know what this use is called {user.attributes.custom:company_name}, reference to a const? Can someone educate me on what that is named and how do I use a colon within one?

Regards

You can access object's properties with brackets as well.

<a class="uk-text">{user.attributes["custom:company_name"]}</a>

Since a colon isn't a valid character for variables, object properties (because it's used to set a value to some property), you have to define/get the value with wrapping the name with quotes.

Hope I got the problem correctly.