How to get the teamId and userPrincipalName on my tab.js?

Question

As the title states, I'm trying to figure out how I get my teamId and userPrincipleName on my page within my custom teams app. I've come across lots of different info but I'm a complete beginner at Javascript and React so I don't have a clue how to properly apply it.

How do I show the teamId and userPrincipleName on my tab.js page within the team's app?

My code:

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

import React from 'react';
import './App.css';
import * as microsoftTeams from "@microsoft/teams-js";

class Tab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      context: {}
    }
  }

  componentDidMount(){
    microsoftTeams.getContext((context, error) => {
      this.setState({
        context: context
      });
    });
  }

  componentDidMount(){
    microsoftTeams.getContext((context) =>{
        let userId = document.getElementById('user');
        userId.innerHTML = context.userPrincipalName;
    });

  }

  render() {   
    return(
        <span id="user"></span>
        
    )
  }
}
export default Tab;

Answer 1

Your first componentDidMount is fine

  componentDidMount(){
    microsoftTeams.getContext((context, error) => {
      this.setState({
        context: context
      });
    });
  }

This is calling the api, and then saving the context response in local state.

An issue is you have 2 componentDidMount functions, you should only have 1, so you can delete the 2nd one. In react you can render the variables using {variable}, you don't need to manually set innerHTML.

You can modify your render function to use that context variable in the local state like below

render() {
    // grab the values from state.context
    const { teamId, userPrincipleName } = this.state.context;
    
    return(
        <span id="user">Team: {teamId}, userPrincipleName: {userPrincipleName }</span>
        
    )
}