A simplified version of the Pod component

Pod.js

import React from 'react';
import ReactDom from 'react-dom';
import {Entity} from 'aframe-react';

class Pod extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            color: props.color,
            clicked: false
        }

    }

    componentDidMount() {
        // Fun hack to make physics and grab register newly added objects
        [].slice.call(document.querySelectorAll('.controllers')).forEach((el) => el.removeAttribute('sphere-collider'));
        [].slice.call(document.querySelectorAll('.controllers')).forEach((el) => el.setAttribute('sphere-collider', 'objects: .pod;'));

        // Enable physics on the appended object
        ReactDom.findDOMNode(this.refs.pod).setAttribute('dynamic-body', '');

        // Dynamically set position to spawn object
        ReactDom.findDOMNode(this.refs.pod).setAttribute('position', this.props.podPOS);
    }
    componentWillUnmount()  {
        console.log("Removing: " + this.props.name)
    }

    render() {

        var name = "Name: " + this.props.name;
        var namespace = "Namespace: " + this.props.namespace;
        var ipAddress = "IP: " + this.props.ip;
        var startTime = "Launched: " + this.props.startTime;
        
        return(
            <Entity ref="podholder" id="pod-holder">
                <Entity key={name}
                pod-ui-hide
                ref="pod"
                geometry={{ primitive: 'box' }} 
                id={this.props.name}
                material={ metalness:.2; roughness: 0.7;} 
                className="pod"
                force-pushable="force: 300"
                the-void >
           </Entity>
        )
    }
}
 
export default Pod;