React

by metulev

HTML

<!-- <script src="https://unpkg.com/@microsoft/[email protected]/dist/bundle/mgt-loader.js"></script> -->
<script src="https://unpkg.com/@microsoft/[email protected]/dist/bundle/mgt-loader.js"></script>
<div id="app"></div>

React

const App = () => {
    return (
      <div>
        <h2>People:</h2>
        
        <mgt-person
          show-name={true}
          person-card="click"
          ref={(element) => {
            if(!element) {
							return;
						}
            element.personDetails={
            	displayName: 'Bill Gates'
            }
            element.personCardInteraction = 2;
        }}
        >
         <template data-type="person-card">
        <mgt-person-card inherit-details>
          <template data-type="additional-details">
            <h3>Stuffed Animal Friends:</h3>
            <ul>
              <li>Giraffe</li>
              <li>lion</li>
              <li>Rabbit</li>
            </ul>
          </template>
        </mgt-person-card>
      </template>
        </mgt-person>
        <br />
        <br />
      </div>
    )
  }


ReactDOM.render(<App />, document.querySelector("#app"))