如果里面有胖箭头功能

Question

Im not sure how to write this. I have this ternary operator inside the fat arrow. but if fails to execute the code. I get no errors with browserify or on console, but it just does not print the headers.

If I drop the {} and ternary operator it works fine.

What am I typing wrong?

<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>

Answer 1

You just forgot the return inside map() .
Inside map() you return for each iteration undefined and this will be ignored because there is nothink to render.
When you use your fat arrow function with "{}" you have to explicit return ( (x) => {return x + x} ) a variable but without there is a implicitly return ( (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

You need to explicitly return the jsx if it's not the entire body of the fat arrow function.

Your code fixed:

<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 it works when you remove the curly braces and ternary operator is because when you do a fat arrow function without curly braces for the body, it implicitly returns the body, which must be only one statement. Since you're adding a second statement in the function body (the ternary line), you need to add the body braces, and now there there are body braces, you need to actually write the return keyword because it's no longer implicit for your jsx line.