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?

HosseinAgha · Accepted Answer · 2017-03-27 13:42:45Z

8

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

edited Mar 27, 2017 at 13:42

answered Mar 27, 2017 at 13:36

HosseinAgha

8337 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sourbh Gupta · Accepted Answer · 2017-03-28 04:35:57Z

1

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>
    )
}
};

answered Mar 28, 2017 at 4:35

Sourbh Gupta

8337 silver badges16 bronze badges

2 Comments

sugandh goyal Over a year ago

This will print space until day becomes >=6. So 1 comes on Saturday so does 2,3,4,5. And then they will start printing from Monday (from 6).

Sourbh Gupta Over a year ago

@sugandh you have asked why your function numrow doesn't print anything and the reason is you ditn't return anything from the function and by default it returns the undefined. what you wants to print its your logic

Collectives™ on Stack Overflow

Iterate through array in Reactjs

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related