problem mixing material-ui elements and code in react javascript

Basically I can't get a map to exec more than one statement.

You can't execute more than one expression inside a arrow function definition, instead use regular declarated functions

    {formColumns.map((y, k) => {
      y.displayColumn ? (cols+=1) : null;
      // Return what you want to render
      return y.displayColumn ? (<TableCell key={`trc-${k}`}>{x[y.name]}</TableCell>) : null
    }}

There are only two types of arrow function

arrow_function = () => "i will be returned"
// This way you declare only one expression after the arrow and it is returned

and

arrow_function = () => {
    // This is a regular logic function
    text = "i will be" + " returned";
    return text;
}

EDIT 1: Add conditionals between JSX

There are two ways i know to do it

const App = () => {
  return (
    <div>
      <h2>First form</h2>
      <FirstForm true={true} />
      <hr />
      <h2>Second form</h2>
      <SecondForm true={false} />
    </div>
  )
}

const FirstForm = props => {
  // This way is just a ternary conditional
  return (
    <div>
      {props.true
        ? <span className="success">True condition matched</span>
        : <span className="danger">False condition matched</span>
      }
    </div>
  )
}
const SecondForm = props => {
  // This way uses a anonymous function executed in runtime
  return (
    <div>
      {(() => {
        let message = "Hello";
        message += " World, from an auto executed anonymous function";
        return (
        <span className={props.true?"success":"danger"}>{message}</span>
        )
      })()}
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.success {
  color: darkgreen;
}
.danger {
  color: #5e181b;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="react"></div>

Ok psiro, so I looked at your examples, which all work in your situation. However, as soon as I apply one to my scenario, I still get a syntax error. Like here:

<TableBody>
  {(() => {
    console.log('data = ' + JSON.Stringify(data, null, 2) + '.'));
    return ((data.length > 0) ? (
    data.map((x, i) => row(
    x,
    i,
    formColumns,
    handleRemove,
    handleSelect,
    editIdx
    ))) : (<TableRow><TableCell colSpan={`${cols}`}>No Data</TableCell></TableRow>) )
  })()}
</TableBody>

And this is the problem I have w/anonymous functions. They create unmaintainable code. I am not doing anything different than your example. Just TWO js statements inside the code you presented. Your code works, mine returns a syntax error.

And why do I even NEED a double-anonymous function to have 2 simple js statements inside an if statement? Why does your code work, and mine not?

Addendum:

Ok, so I made some inferences based on your code and realized I had added yet ANOTHER anonymous function (the map statement) into the code. I reworked it into this, which compiled:

  {(() => {
    console.log('data = ' + JSON.Stringify(data, null, 2) + '.');
    if (data.length > 0) {
    return (data.map((x, i) => row(x, i, formColumns, handleRemove, handleSelect, editIdx)))
  }
  return(<TableRow><TableCell colSpan={`${cols}`}>No Data</TableCell></TableRow>)
  })()}

The fact that it looks completely unmaintainable is irrelevant I guess. But it doesn't matter because it STILL doesn't work! Now I get a 'JSON.stringify is not a function' at runtime, which is ridiculous of course. Why can't I get a simple console.log to work in reactjs?

ADDENDUM:

Ok, I fixed the issue thanks to all the help. For anyone else that has an issue w/multiple statements inside an anonymous function, if you want to do it, you need to add a return statement so the function knows what result to return.

<TableBody>
  {(() => {
    console.log('data = ' + data + '.');
    if (data.length > 0) {
    return (data.map((x, i) => row(x, i, formColumns, handleRemove, handleSelect, editIdx)))
  }
  return(<TableRow><TableCell colSpan={`${cols}`}>No Data</TableCell></TableRow>)
  })()}     
</TableBody>

That includes when you have an anonymous function inside another anonymous function. Hope this helps anyone else having this problem.