Iterate through array in Reactjs

Question

const cal_days =['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const cal_months =['Jan', 'Feb', 'March', 'April',
 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec'];
const daysinmonth =[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const curr =new Date();
var d = new Date();
var n = d.getMonth();
var yearName=d.getFullYear();
var monName= cal_months[n];
var firstDay = new Date(yearName,n, 1);
var startD = firstDay.getDay();
var num= daysinmonth[n];
var day=1;

class Show extends Component{
 numrow(){ 
  var array=[];
  for (var i = 1; i <=num; i++) {
  for (var j = 0; j <= 6; j++) { 
    if (day <= num && (i > 0 || j >= startD)) {
      array.push(i);
      day++;
      }
      if (day > n)
        break;
       }
      }
 array.map(function(){
 for (var i = 1; i <=6; i++) { 
  // console.log(<td>{array[i]}</td>);
  return <td>{array[i]}</td>;
 }
 })
 }
 render(){
 var daysname= cal_days.map(function(day){
 for(var i = 0; i <= 6; i++ ){
  return <td>{day}</td>;}
 })
 return (
 <div>
 <table>
 <tbody>
 <tr>
 {daysname}
 </tr>
 <tr>
 {this.numrow()}
 </tr>
 </tbody>
 </table>
 </div>
 ) 
  }
  };

---

I have started studying Reactjs. I am making this calendar in Reactjs. I want to display the days 1,2,3..so on. Why does the function numrow doesn't display anything? I haven't posted the whole code here, just a part of it. Have I used array.map() function correctly?

Answer 1

Please read the map api and how to use this function.
your array.map should be something like this:

array.map(function(val){
  return <td>{val}</td>;
})
cal_days.map(function(day){
  return <td>{day}</td>;
})

The for loop is unnecessary

Answer 2

Nothing is printed because you didn't return anything from the function numrow. I have did some modification in your logic to print what you want.

class Show extends Component {
numrow() {
    var array = [];
    do{
        var arrayRow = [];
        for (var j = 0; j <= 6; j++) {
            if (day <= num && (j >= startD || day >= startD)) {
                arrayRow.push(day);
                day++;
            } else {
                arrayRow.push("");
            }
        }
        array.push(arrayRow);
    }while(day < num)

    return array.map(function (arrayRow) {
        return (
            <tr>
                {arrayRow.map(function(item){
                    return <td> {item} < /td>        
                })}
            </tr>
        )

    })
}
render() {
    var daysname = cal_days.map(function (day) {
           return <td > {day} < /td>;
    })
    return ( 
        < div >
            < table >
                < tbody >
                    < tr > {daysname} < /tr> 
                    {this.numrow()} 
                < /tbody>
            < /table>
        </div>
    )
}
};