React.js Component Child - Global Connectivity

Question

Child component in React.js

I am creating an application that can be viewed as a list of crypto-portfolio. Each coin item has some details, such as stocks and price. They are stored in a dictionary stored in localstorage and loaded into the state of the components of the portfolio container.

A hierarchy can be thought of as Container> PortfolioList> Item.

My question is this: onClick of Portfolio Item, I want to populate a completely different component with an API call to this portfolio (to show the historical graph) called PortfolioDetails.

Question

How is this component - global interaction best handled in React.js? Is it best to determine the state in the PortfolioContainer and change it when you click on the PortfolioItem child (passing it through 2 parents) or is there a way to re-render the PortfolioDetails onClick component, as I tried here?

Thanks!

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( <Container> <Row> <Col xs="12"> <PortfolioList currency={this.state.currency} portfolio={this.state.portfolio} /> <PortfolioDetails show='portfolio'/> </Col> </Row> </Container> ); } } export class PortfolioList extends React.Component{ constructor(props){ super(props); } render(){ const rows = []; if(Object.keys(this.props.portfolio).length > 0){ Object.keys(this.props.portfolio).map((coin, details) =>{ rows.push( <CoinRow coin={coin} details={this.props.portfolio[coin]} currency={this.props.currency} key={coin} /> ) }); } return( <table> <thead> <tr> <th>Coin</th> <th>Holdings</th> <th>Price</th> </tr> </thead> <tbody> {rows} </tbody> </table> ); } } 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 <PortfolioDetails show={coinId}/> } render(){ const coin = this.props.coin; const details = this.props.details; var holdings = null; return ( <tr data-id={coin} onClick={this.handleClick}> <td>{coin}</td> <td>{holdings}</td> <td>{details.price.display[this.props.currency].PRICE}</td> </tr> ); } } export class PortfolioDetails extends React.Component{ constructor(props){ super(props); } render(){ var showing = this.props.show; return( <div> // Showing details for the following coin <p>{showing}</p> </div> ); } } 

Answer 1

The best way to do what you want is to use Redux .

So you will have a stream like this:

You see that the UI is defined by State and there is a unique Store that contains the State application? This is why Redux works great in your use case.

You can save State in your Store , for example:

 cryptoPorfolio: { // this is the name of the reducer, it will be part of the state tree, read below coin: '' } 

Now you can update this State run action in the “UI”, which will be sent to Reducer , which will finally do the update. Something like that:

Act

 { type: 'UPDATE_COIN', coinName: 'ETH' } 

Action Creator (just functions that can be launched by the user interface)

 function updateCoin(coin) { return { type: 'UPDATE_COIN', coinName: 'Ethereum' } } 

You can use bindActionCreators from react-redux to pass the action creator to your component.

Then, in your component, you call the action creator as a normal function, passed as a support, to send the action to the reducer.

Finally, in the gearbox, you can update the Store . For instance:

 function cryptoPorfolio(state = initialState, action) { switch (action.type) { case UPDATE_COIN: return Object.assign({}, state, { coin: action.coinName }) default: return state } } 

For more information, see Using Redux with React .

Answer 2

Yes, it would be best practice to have a PortfolioContainer manage the state of which children are hidden / shown. This will be the easiest way to update the entire component tree. You can have a handlePortfolioItemClick method that can update the state to show different data inside PortfolioDetails .