When we find ourselves within a fat arrow function

Question

When we find ourselves within a fat arrow function

I'm struggling with this code. I have a ternary operator within a fat arrow function, but for some reason it's not working. There are no errors in browserify or the console, but the headers are not being printed.

If I remove the {} and ternary operator, everything works as expected.

What am I missing here?

<Row className="grid-header">
    {
        this.props.columnsInfo.map((info) => {
            width = (info.colWidth) ? "className={info.colWidth}" : "xs={this.calculateColumnSize()}";
            <Col style={{ paddingTop: 10, paddingLeft: 10 }} key={info.header} width>{info.header}</Col>
        })
    }
</Row>

javascript arrays if-statement jsx higher-order-functions

Answer 1

Answer №1

Don't forget to include the return statement within the map() function.
Within the map(), each iteration should return a value, otherwise it will be ignored during rendering.
When using a fat arrow function with "{}", you need to explicitly use the return keyword like this: ((x) => {return x + x}) for variables, while without "{}" there is an implicit return like this: ((x) => x + x).

Solution

<Row className="grid-header">
    {
        this.props.columnsInfo.map(info => {
            const width = info.colWidth 
              ? "className={info.colWidth}"
              : "xs={this.calculateColumnSize()}";
            return <Col style={{ paddingTop: 10, paddingLeft: 10 }} key={info.header} width>{info.header}</Col>
        })
    }
</Row>

Answer 2

Don't forget to include the return statement within the map() function.
Within the map(), each iteration should return a value, otherwise it will be ignored during rendering.
When using a fat arrow function with "{}", you need to explicitly use the return keyword like this: ((x) => {return x + x}) for variables, while without "{}" there is an implicit return like this: ((x) => x + x).

Solution

<Row className="grid-header">
    {
        this.props.columnsInfo.map(info => {
            const width = info.colWidth 
              ? "className={info.colWidth}"
              : "xs={this.calculateColumnSize()}";
            return <Col style={{ paddingTop: 10, paddingLeft: 10 }} key={info.header} width>{info.header}</Col>
        })
    }
</Row>

Answer 3

Answer №2

Make sure to explicitly return the JSX if it's not the entire body of the fat arrow function.

Here is your updated code:

<Row className="grid-header">
    {this.props.columnsInfo.map(info => {
            const width = (info.colWidth)? "className={info.colWidth}" : "xs={this.calculateColumnSize()}";
            return (<Col style={{paddingTop:10,paddingLeft:10}} key={info.header} width>{info.header}</Col>);
    })}
</Row>

The reason why it works when you remove the curly braces and ternary operator is because a fat arrow function, without curly braces for the body, implicitly returns the body which should be only one statement. Adding a second statement in the function body requires curly braces, and since there are now curly braces, you need to use the return keyword to explicitly return your JSX line.

Answer 4

Make sure to explicitly return the JSX if it's not the entire body of the fat arrow function.

Here is your updated code:

<Row className="grid-header">
    {this.props.columnsInfo.map(info => {
            const width = (info.colWidth)? "className={info.colWidth}" : "xs={this.calculateColumnSize()}";
            return (<Col style={{paddingTop:10,paddingLeft:10}} key={info.header} width>{info.header}</Col>);
    })}
</Row>

The reason why it works when you remove the curly braces and ternary operator is because a fat arrow function, without curly braces for the body, implicitly returns the body which should be only one statement. Adding a second statement in the function body requires curly braces, and since there are now curly braces, you need to use the return keyword to explicitly return your JSX line.

When we find ourselves within a fat arrow function

Answer №1

Solution

Answer №2

Similar questions

Converting a String to an Integer in JavaScript

How do I utilize Ajax to compare the value selected from a drop down menu in a form with entries in my database, and retrieve the corresponding record/row to automatically fill in a form?

Tips for preventing the initiation of a session on a specific Express route?

I need assistance setting up a Facebook page feed using Angular.js. I want to display the posts in a list of cards and include a fullscreen image gallery. Is

React Redux components are failing to render after changes are made to the state array

Using VueJS Computed Property along with Lodash Debounce

AngularJS Cascading Dropdowns for Enhanced User Experience

Guide to encapsulating a container within a map function using a condition in JSX and TypeScript

Personalized parameters in communication for Quickblox's JavaScript

Is it possible to refactor this forwardRef so that it can be easily reused in a function?

NodeJS with Selenium - Attempting to Choose a Button

Tracking user session duration on a React Native app can be achieved by implementing a feature that monitors and

Is there a way to ensure my chat view functions properly without relying on partial views?

Issue arises after injecting HTML element into the DOM due to memory constraints and display inconsistencies

Azure experiencing issue with MUI Datepicker where selected date is shifted by one day

Create an interactive mechanism where one scrollbar dynamically adjusts another scrollbar and vice versa

Creating an asynchronous function in Node.js that returns a promise, but experiencing unexpected behavior when using console.log to display the result

Executing a JavaScript code in a Python webdriver: A step-by-step guide

Changing a string-stored array into a List object in JavaString

Remove the background color from a semi-transparent circular CSS div when it is being dragged