I have a table that fills its rows and <td> tags on its own. It does this fine as shown below:

The table is generated by mapping through an array.

{objInnerValues[shopIndex].map((thing, outerIndex) => (
                            
// Ternary operator to stop creating rows from element 0
            (outerIndex === 0) ? console.log("outerIndex WAS 0") : (outerIndex %2 === 0) ? 
            Object.values(thing).map((innerThing, innerIndex) => (
<>
                            
{/* Tooltip popup for item blurb */}
            <HtmlTooltip title={
                 //a tooltip component, from MUI. Gets a string to display
            }
            >
                            
                            
{/* Table rows for each record */}
            <TableRow
                //style definitions, then an id for the row...
                id =  {"rowID-" thing[0][0]}
            >

            {AR_RowRefs.push("rowID-" thing[0][0])}

{/* Indidivual td elements to display each item in a row*/}
            <SuperTD NoHoverTD>
                {//Items name}
            </SuperTD>
                            
            <SuperTD NoHoverSmallTxtTD>
                {//category the item belongs to} 
                <Button>
                //a visibility button, part of what I'm trying to work on
                </Button>
            </SuperTD>

            <SuperTD NoHoverSmallTxtTD>
                {
                //Get weight of item from array and format it
                }                    
            </SuperTD>

            <SuperTD NoHoverSmallTxtTD>
                {
                //Get price from array and format it
                }
            </SuperTD>

{/* Checkbox for if item is available */}
            <SuperTD>
                <input type="checkbox" defaultChecked={innerThing[6]}/>
            </SuperTD>

{/* Checkbox for if item is limited */}
            <SuperTD>
                <input type="checkbox" defaultChecked={innerThing[7]}/>
            </SuperTD>

            </TableRow>
        </HtmlTooltip>
    </>

Above my return block I have an array I want to use to store the ID of each table row that is generated. I have a function (fired from an onClick of each visibility button).

I wrote this in my return block, inside the array map:

{AR_RowRefs.push("rowID-" thing[0][0])}

However, when I save this and it renders, it creates an extra column of data:

I thought that an extra <td> would only render if I put tags around it. This is just a JSX snippet so is there any particular reason its creating its own <td>? Can I still have this snippet push ids to an array without rendering an extra element?

CodePudding user response：

I thought that an extra <td> would only render if I put tags around it. This is just a JSX snippet so is there any particular reason its creating its own <td>?

The browser is attempting to recover from your error of putting a number (which gets converted to a string) as a child of a tr.

Can I still have this snippet push ids to an array without rendering an extra element?

The quick and dirty approach (which I haven't tested) would be to change the expression so it doesn't evaluate as a number.

{void AR_RowRefs.push("rowID-" thing[0][0])}

The sensible approach would be to split your data manipulation logic and your display logic.

Object.values(thing).map((innerThing, innerIndex) => {

    AR_RowRefs.push("rowID-" thing[0][0]);

    return <>
        ...
    </>;

};