CODEWITHSUNDEEP
reactjs
Ashwani Panwar
Ashwani Panwar

Reputation: 4608

data is not populating on the screen, react

I am working with class component in react which is receiving data as an array, bus data of this not showing on the screen.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class CountryList extends Component {
  constructor(props) {
    super(props);
  }

  renderCountry = country => {
    console.log(country);
    return `<ol>${country} ${country.substring(0, 15)}</ol>`;
  };

  render() {
    const { countryData } = this.props;

    return (
      <div className="col-xs-12  col-sm-12 col-md-12 col-lg-12">
        {countryData.map(country => {
          this.renderCountry(country);
        })}
      </div>
    );
  }
}

CountryList.propTypes = {
  countryData: PropTypes.arrayOf(PropTypes.string),
};
export default CountryList;

What I am doing wrong ?

Upvotes: 0

Views: 87

Answers (1)

Clarity
Clarity

Reputation: 10873

You're missing return in map:

  return (
    <div className="col-xs-12  col-sm-12 col-md-12 col-lg-12">
      {countryData.map(country => {
        return this.renderCountry(country); // add return here
      })}
    </div>
  );

Upvotes: 1

Related Questions