CODEWITHSUNDEEP
reactjs
anesthetic
anesthetic

Reputation: 315

Function inside JSX, is not returning the elements: ReactJS

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?

Upvotes: 2

Views: 59

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104529

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

Upvotes: 2

Related Questions