Function not returning value in react JSX

Question

So I have a module that renders a calender for the current month. It looks like this.

let days = {0: 'Sun', 1: 'Mon', 2: 'Tue', 3: 'Wed', 4: 'Thu', 5: 'Fri', 6: 'Sat'};
let today = new Date();
today.setDate(1);
let dayOfWeek = today.getDay();
let count = 0;

class Calender extends Component {
    constructor(props) {
        super(props);
        this.calRender = this.calRender.bind(this);
     }

    calRender(x) {Object.keys(days).map(index => {count++;
                 return <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>})}


    render() {



        return(
            <table>
                    <tr>
                        {Object.keys(days).map((index) => <th key={index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#232'}}>{days[index]}</th>)}
                    </tr>
                    <tr>
                        {Object.keys(days).map(index => {
                                                if(index < dayOfWeek) {
                                                    return <td key={index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#bbb'}}></td>}
                                                else {count++;
                                                      return <td key={index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>}
                                                })}
                    </tr>
                    <tr>
                    {this.calRender(7)}
                    </tr>
                    <tr>
                    {this.calRender(14)}
                    </tr>
                    <tr>
                    {this.calRender(21)}
                    </tr>
                    <tr>
                    {this.calRender(21)}
                    </tr>

            </table>

        )
    }
}

The problem is that calRender function is not returning anything, even though it is supposed to return tags with dates. When I am doing this without a function(by writing map statements for each tag), it is working fine. Please suggest where I have messed this up.

Patrick Hund · Accepted Answer · 2018-06-17 09:55:24Z

3

Your calRender method does not return anything. You do have a return statement in the map function's callback, but that's not enough.

Fix it by adding a return statement:

calRender(x) {
    return Object.keys(days).map(index => {
        count++;
        return <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>{count}</td>};
    );
}

answered Jun 17, 2018 at 9:55

Patrick Hund

20.4k12 gold badges71 silver badges97 bronze badges

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

Comments

Soroush Chehresa · Accepted Answer · 2018-06-17 10:06:44Z

1

Your calRender method does not return anything.

Edit calRender method like this:

calRender(x) {
   return Object.keys(days).map(index => {
      count++;
      return (
        <td key={x+index} style={{...styleVars.defaultTextColor, ...styleVars.blockSize, backgroundColor: '#777'}}>
          {count}
        </td>
      )
   })
}

edited Jun 17, 2018 at 10:06

answered Jun 17, 2018 at 10:01

Soroush Chehresa

5,6981 gold badge16 silver badges30 bronze badges

2 Comments

Sanchit Over a year ago

I have initialized count at the top with let count = 0 statement.

Soroush Chehresa Over a year ago

@Sanchit you should use state for this case. reactjs.org/docs/state-and-lifecycle.html

Collectives™ on Stack Overflow

Function not returning value in react JSX

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related