Function inside JSX, is not returning the elements: ReactJS

Question

I am trying to add extra rows on a table that is generated using results.map, but the code that I have added to generate the extra rows isn't executing. Does anyone know why this wouldn't work?

< tbody >
    {
        results.map(result => {
            let rowNodes = [];
            rowNodes.push(<td className="hidden">{result.itemCtrlType}</td>);
            if (this.props.gridNumber == 1) {
                rowNodes.push(<td className="in-td-item">{result.metric}</td>);
            } else {
                rowNodes.push(<td className="in-td-item hidden">{result.metric}</td>);
            }
            for (const hour in result) {
                if (hour.indexOf('t') == 0 && hour.length == 3) {
                    let now = Date.now();
                    let d = new Date(now);
                    let hours = d.getHours();
                    let time = hours.toString();
                    if (hours < 10) {
                        time = 't0' + hours;
                    }
                    else {
                        time = 't' + hours;
                    };
                    let classname = "in-td";
                    if (hour == time && this.props.dateAdjust == 0) {
                        classname += " cell-timenow";
                    }
                    if (hour == 't23') {
                        classname += " table-lastcolumn";
                    }
                    let date = [pad(d.getMonth() + 1), pad(d.getDate()), d.getFullYear()].join('/');
                    rowNodes.push(<td key={hour} className={classname} >{result[hour]}</td>)
                }
            }
            if (this.props.gridNumber == this.props.totalGrids) {
                rowNodes.push(<td className="in-td-addcolumn in-td"></td>);
            }
            return <tr key={result.metric} onClick={this.handleClick}>{rowNodes}</tr>
        })
    }
    {
        () => {
            console.log(this.props.rowsCount > results.length);
            if (this.props.rowsCount > results.length) {
                let diff = this.props.rowsCount - results.length;
                var rowNodes = [];
                for (let m = 0; m < diff; m++) {
                    rowNodes.push(<td className="hidden"></td>);
                    if (this.props.gridNumber == 1) {
                        rowNodes.push(<td className="in-td-item"></td>);
                    } else {
                        rowNodes.push(<td className="in-td-item hidden"></td>);
                    }
                    for (let n = 0; n < 24; n++) {
                        rowNodes.push(<td className="in-td"></td>);
                    }
                    if (this.props.gridNumber == this.props.totalGrids) {
                        rowNodes.push(<td className="in-td-addcolumn in-td"></td>);
                    }
                    return <tr>{rowNodes}</tr>
                }
            }
        }
    }
</tbody>

I have tried various combinations of wrapping it in divs or changing where it returns but nothing seems to work.

Anyone know why this isn't firing?

you are talking about: `() => {...}` this code that is not working, correct? — Mayank Shukla, Jan 28 '18 at 06:43

Mayank Shukla · Accepted Answer · 2018-01-28T07:22:42.550

First of all, that is not a good way of organising code, instead of putting the function directly inside JSX, better to define it outside of render method and then call.

Solution:

Issue with your code is, you defined a function inside JSX, but you are not calling it, Use IIFE and call that function, also return null when if condition fails, Like this:

{
    (() => {
        console.log(this.props.rowsCount > results.length);
        if (this.props.rowsCount > results.length) {
            let diff = this.props.rowsCount - results.length;
            var rowNodes = [], elements = [];
            for (let m = 0; m < diff; m++) {
                rowNodes = [];
                rowNodes.push(<td className="hidden"></td>);
                if (this.props.gridNumber == 1) {
                    rowNodes.push(<td className="in-td-item"></td>);
                } else {
                    rowNodes.push(<td className="in-td-item hidden"></td>);
                }
                for (let n = 0; n < 24; n++) {
                    rowNodes.push(<td className="in-td"></td>);
                }
                if (this.props.gridNumber == this.props.totalGrids) {
                    rowNodes.push(<td className="in-td-addcolumn in-td"></td>);
                }
                elements.push(<tr key={m}>{rowNodes}</tr>);
            }
            return elements;
        }
        return null;
    })()
}

Note:

Whenever execution find return statement inside for loop, it will immediately break the loop and return that result, so instead of using return use one more variable and put the tr inside that, Return the result only after for loop completion.

Suggestion:

Assign unique key to each dynamically created elements inside loop.

Check DOC.

Check this answer for more details about keys: Understanding unique keys for array children in React.js

Wow thanks for all the helpful information. Should I also be putting keys on elements as well? Or just in this case? — anesthetic, Jan 28 '18 at 07:12
yea, define the keys with the td also, concept is: "keys should be uniques among its siblings" so all the td inside `tr` should have the uniques keys, you can use same keys again for all other `td's` inside another `tr` :) — Mayank Shukla, Jan 28 '18 at 07:19
check [DOC](https://reactjs.org/docs/lists-and-keys.html) for more details. — Mayank Shukla, Jan 28 '18 at 07:21

Function inside JSX, is not returning the elements: ReactJS

1 Answers1