CODEWITHSUNDEEP
reactjsjsx
lem.mallari
lem.mallari

Reputation: 1275

Items not being Rendered when calling Map on Component

I'm having a hard time figuring out why, nothing shows up in my exchange information component when I call the map function for my exchangerate components. Below are the definition of my components.

I think I'm missing something simple but I can't seem to figure it out. I'm still new to React and always had problems rendering a collection of components. Any best practices that I can follow when doing it?

Home Component

class HomePage extends React.Component {
  //some setup here

  componentDidMount() {
    //some action here
  }

  componentWillReceiveProps(newProps) {
    //some prop checking here
  }

  render() {
    return (
      <div>
        <div className="row flex-container">
        {
            <ExchangeInformation
              coin={this.state.coin}
              exchangeRates={this.state.exchangeRates}
            />
        }
        </div>
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    //returning state selectors here
  };
}

function mapDispatchToProps(dispatch) {
  return {
    //return actions here
  };
}

HomePage.propTypes = {
  ccActions: PropTypes.object.isRequired
};

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

Exchange Information Component:

const ExchangeInformation = ( {coin, exchangeRates} ) => {
  return (
    <div className="exchange-rate">
      <h3>Current Exchange Rates</h3>
          {
            Object.keys(exchangeRates).map(function(key, index) {
              <div>
                <ExchangeRate
                  coin={coin}
                  exchangeRate={exchangeRates[key]}
                  symbol={key}
                  key={index}
                />
              </div>
            })
          }
    </div>    
  );
};

ExchangeInformation.propTypes = {
  coin: PropTypes.object.isRequired,
  exchangeRates: PropTypes.object
}

export default ExchangeInformation;

ExchangeRate Component:

const ExchangeRate = ( {coin, exchangeRate, symbol} ) => {
  return (
    <label className="label-field">
      <strong>{"1 " + coin.CoinName}</strong> is equal to <strong>{exchangeRate + " (" + symbol + ")"}</strong>
    </label>  
  );
};

ExchangeRate.propTypes = {
  coin: PropTypes.object.isRequired,
  exchangeRate: PropTypes.number,
  symbol: PropTypes.string
}

export default ExchangeRate;

Upvotes: 0

Views: 41

Answers (3)

Gobinda
Gobinda

Reputation: 79

Yes, you have missed the return statement inside map.

Regarding best practice: You can observe, you have pass coin as a props parent to child(HomePage to ExchangeInformation) then child to it's child (ExchangeInformation to ExchangeRate). It is called props drilling, for more details:https://blog.kentcdodds.com/prop-drilling-bb62e02cb691. You can eliminate this. For reference please go through below links: With props drilling: https://codesandbox.io/s/q8yqx48074 After eliminating props drilling: https://codesandbox.io/s/93963xzjnp

Upvotes: 0

Owais Ahmed Qureshi
Owais Ahmed Qureshi

Reputation: 94

You need to return in map. You can refer this example I have created for your case https://stackblitz.com/edit/react-rxbe24

Upvotes: 1

nine9stars
nine9stars

Reputation: 247

In Exchange Information Component, you need to use return statement in map function.

const ExchangeInformation = ( {coin, exchangeRates} ) => {
  return (
    <div className="exchange-rate">
      <h3>Current Exchange Rates</h3>
          {
            Object.keys(exchangeRates).map(function(key, index) {
              // add return statement here
              return  (<div>
                <ExchangeRate
                  coin={coin}
                  exchangeRate={exchangeRates[key]}
                  symbol={key}
                  key={index}
                />
              </div>)
            })
          }
    </div>    
  );
};

ExchangeInformation.propTypes = {
  coin: PropTypes.object.isRequired,
  exchangeRates: PropTypes.object
}

export default ExchangeInformation;

Upvotes: 1

Related Questions