I am utilizing the ternary operator within the map function to dynamically adjust the column width of a material table

Looking to adjust column widths based on the IDs received from the map function. Check out the code snippet:

<TableRow>
                        {
                            tableData.header.map(header => {
                                header.id === "name" ? 
                                (<TableCell style={{width: 100}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>)
                                :
                                (<TableCell style={{minWidth: 185}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>)
                            })
                        }
</TableRow>

The error I'm encountering points to this line:

header.id === "name" ?

The specific error message reads: "Expected an assignment or function call and instead saw an expression no-unused-expressions"

Need some help pinpointing the issue here.

I've attempted adding 'return' before TableCell in both scenarios, but it triggers an error.

Answer №1

Arrow functions with a body sometimes need an explicit return statement to return a value. On the other hand, arrow functions without a body (no {}) have an implicit return.

Solution

The solution is to return the entire ternary expression.

<TableRow>
  {tableData.header.map((header) => {
    return header.id === "name" ? (
      <TableCell style={{ width: 100 }} align="center" key={header.id}>
        {header.title}
      </TableCell>
    ) : (
      <TableCell style={{ minWidth: 185 }} align="center" key={header.id}>
        {header.title}
      </TableCell>
    );
  })}
</TableRow>

This code can be made more DRY by optimizing the logic of the ternary branch. The only difference appears to be in the width value, so it's better to branch there.

<TableRow>
  {tableData.header.map((header) => {
    return (
      <TableCell
        style={{ width: header.id === "name" ? 100 : 185 }}
        align="center"
        key={header.id}
      >
        {header.title}
      </TableCell>
    );
  })}
</TableRow>

Answer №2

After tinkering with the code, I came up with this solution:

<TableRow>
                        {
                            tableData.header.map(header => header.id === "name" ? 
                                <TableCell style={{minWidth: 80}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>
                                :
                                <TableCell style={{minWidth: 185}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>
                            )
                        }
</TableRow>

By making some adjustments and removing unnecessary curly braces, I was able to find the solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to generate an error if you attempt to retrieve a property that does not exist within a JavaScript object?

I am creating a new object with specific properties. I need to ensure that an error is triggered if the user attempts to retrieve a property that doesn't actually exist. Is there a way to achieve this in my code? ...

My React app is facing challenges in production due to issues with webpack

To enhance my React application, I incorporated a Google Maps API key and a mail sending library. However, safeguarding sensitive information such as the API key and password is crucial, which cannot be stored in simple variables. To secure these sensitiv ...

Issues with border/padding and overlay in Packery Grid Layout

After spending some time working on a grid layout using the metafizzy isotope packery mode, I have encountered a few issues. To illustrate my problem, I have provided a link to a codepen below: http://codepen.io/anon/pen/EgKdpL Although I am satisfied wi ...

Difficulty with NodeJS, Hapi, and Cascading Style Sheets

I've decided to challenge myself by creating a small webhost using Node.js with hapi. Even though I'm not an expert in Node.js, I am eager to learn as much as possible. Currently, my main issue revolves around fetching a CSS file from an include ...

The JSON response is not being returned by the static React App hosted on Microsoft

Seeking assistance from anyone who may have faced and resolved a similar issue. Our React application is deployed on Azure Static Web App and operates smoothly, but we are stuck on configuring it to return JSON instead of HTML in its responses. Within our ...

Customize the duration of Skeleton animations in Material UI

The <Skeleton> components in mui utilize pulse or wavy animations. Wondering if there's a method to quicken this animation, perhaps by adjusting the duration? ...

"Customize the look of the action button in Material-UI's

Is there a way to customize the appearance of action buttons within a Dialog, DatePicker, or TimePicker by accessing the containing div? I'm looking to add padding between these buttons and potentially change the background color of the div generated ...

show textboxes positioned in the middle of a slanted rectangle

Is there a way to place centered textboxes inside each of the colorful boxes in the image below? Update: I've posted my feeble attempt below. Admittedly, design is not my forte and I'm struggling with this task. p.s. To those who downvoted, tha ...

Counting the number of elements in a list can be problematic when using Firefox

Currently, I am in the process of writing CSS to customize the appearance of an XML document. Specifically, I aim to alter how child elements are displayed and have them resemble HTML OL/UL/LI elements. The structure of my XML file is as follows: <?x ...

Element Not Adjusting to Content Size

I am encountering an issue with my div. I have floated an image to the right and placed my text beside it. My aim is to create a div with a linear gradient, however, the div ends up filling the entire page. How can I make my div adjust to fit only its con ...

How to Style CSS specifically for Internet Explorer?

I'm dealing with a simple div that has a 2px thick border and absolute positioning, but it's hidden until its parent element is hovered over. The issue arises in IE due to the box model, causing the position of this div to be somewhat off in IE c ...

aligning divs in a horizontal distribution is ineffective when the divs become fixed in place

When distributing divs horizontally equally, issues arise when these elements are attached without spaces in between (particularly in Chrome and Firefox). For instance: http://jsfiddle.net/pdelorme/au9ouko0/ HTML : <div class="ul"> <div class=" ...

Safari's flexbox wraps the final column on the top row

When viewed in Safari and some other iOS based browsers, the last column of the first row wraps to the next line. Safari: Chrome / Others: Code: .flexthis { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - ...

Eliminate any blank spaces in the SELECT Angular application for IE-CSS

One issue I encountered is removing the default selected "SELECT" option from a select drop down on my webpage. Currently, I am using to remove it successfully in Chrome and Firefox browsers, but unfortunately IE does not respond to this method. I ha ...

CSS Animation glitch with images

I am currently facing an issue with a slide that transitions between four pictures. The slide is set at a specific pace, but I am encountering a problem with the transition from the last slide back to the first one. I have attempted various solutions such ...

What is the best way to incorporate an image as an input group addon without any surrounding padding or margin?

Hello, I am currently working on integrating a captcha image into a Bootstrap 4 form as an input group item. It is functioning correctly, but there is an issue with a border around the image causing the input field to appear larger than the others. Below i ...

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

Hello there, I have successfully created three columns in one row with column sizes of col-sm-4 each. Each column is further split into two equal sections and includes a footer row. You can see the alignment in the image below: Check out this sample align ...

Tips for accessing Firebase data to advance your project development

Hey there! I've put together this website using reactjs and firebase. If you're interested in contributing to the project, I'm wondering how someone can access the data stored in my firebase account for development purposes. You can check ou ...

Discover the absent style attributes within an HTML code in C# and incorporate them

Currently facing a challenging situation where I have a C# string with html tags: string strHTML = "<span style="font-size: 10px;">Hi This is just a section of html text.</span><span style="font-family: 'Verdana'; font-size: 10px; ...

Ways to reduce the size of images within a bootstrap carousel

I'm currently working on creating a carousel that will serve as a background image cover for my website, similar to the revolutionary slider in WordPress but without using a plugin. I am developing it specifically for my static website. The challenge ...