How to use colons in const - reactjs

Question

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#me.com"
email_verified: false
family_name: "user"
given_name: "test"
locale: "location"
phone_number: "[phone]"
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="uk-child-width-1-3#m 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

Answer 1

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.