title: React.js Component Child - Global interaction
body: <h2>Component child in React.js</h2>
  
  <p>I am creating an app which can be seen as a crypto-portfolio list. Every coin item has some details like holdings and price. These are saved in a dictionary saved in localstorage and loaded in the portfolio container components' state. </p>
  
  <p>The hierarchy can be seen as Container > PortfolioList > Portfolio Item. </p>
  
  <p>My question is as follows: onClick of the Portfolio Item, I want to populate an entirely different component with an API call of that Portfolio Coin ( to show an historical graph ), called PortfolioDetails.  </p>
  
  <h2>Question</h2>
  
  <p>How is this component - global interaction best handled in React.js? Is it best practice to define a state in the PortfolioContainer and change it upon clicking on the PortfolioItem child (passing it through 2 parents), or is there a way to re-render the PortfolioDetails component onClick, like I tried here?</p>
  
  <p>Thank you!</p>
  
  <pre><code>export default class PortfolioContainer extends React.Component{
  constructor(props){
      super(props);
      this.state = (
          {portfolio:
            {ICX:{transactions:[{purchase: '$49.99', amount: 50}], price:{raw:{BTC:{PRICE:3.20}}, display:{BTC:{PRICE:3.20}}}},
          currency: 'BTC',
          total: 0
          }
      )
  }
  
  render(){
  
      return(
          &lt;Container&gt;
              &lt;Row&gt;
                  &lt;Col xs="12"&gt;
                      &lt;PortfolioList currency={this.state.currency} portfolio={this.state.portfolio} /&gt;
                      &lt;PortfolioDetails show='portfolio'/&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
          &lt;/Container&gt;
      );
  }
  }    
  
  
  export class PortfolioList extends React.Component{
  constructor(props){
      super(props);
  }
  
  
  
  render(){
      const rows = [];
  
      if(Object.keys(this.props.portfolio).length &gt; 0){
          Object.keys(this.props.portfolio).map((coin, details) =&gt;{
  
              rows.push(
                  &lt;CoinRow
                  coin={coin}
                  details={this.props.portfolio[coin]}
                  currency={this.props.currency}
                  key={coin}
                  /&gt;
              )
          });
      }
      return(
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Coin&lt;/th&gt;
                      &lt;th&gt;Holdings&lt;/th&gt;
                      &lt;th&gt;Price&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              {rows}
              &lt;/tbody&gt;
          &lt;/table&gt;
      );
  }
  }
  
  export class CoinRow extends React.Component{
  constructor(props){
      super(props)
      this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(e){
      e.preventDefault();
      // Get coin ID from clicked event
      var coinId = e.currentTarget.attributes['data-id'].value;
      // Populate portfolio details with coin details
      &lt;PortfolioDetails show={coinId}/&gt;
  
  }
  
  render(){
      const coin = this.props.coin;
      const details = this.props.details;
      var holdings = null;
      return (
          &lt;tr data-id={coin} onClick={this.handleClick}&gt;
              &lt;td&gt;{coin}&lt;/td&gt;
              &lt;td&gt;{holdings}&lt;/td&gt;
              &lt;td&gt;{details.price.display[this.props.currency].PRICE}&lt;/td&gt;
          &lt;/tr&gt;
      );
  }
  } 
  export class PortfolioDetails extends React.Component{
  constructor(props){
      super(props);
  }
  
  
  render(){
      var showing = this.props.show;
      return(
          &lt;div&gt;
              // Showing details for the following coin
              &lt;p&gt;{showing}&lt;/p&gt;
          &lt;/div&gt;
          );
  }
  }
  </code></pre>