problème de mélange des éléments material-ui et du code dans react javascript

En gros, je ne peux pas obtenir une carte pour exécuter plus d'une instruction.

Vous ne pouvez pas exécuter plus d'une expression dans une définition de fonction de flèche, utilisez à la place des fonctions déclarées régulières

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

Il n'y a que deux types de fonction de flèche

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

et

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")
);

EDIT 1: Ajouter des conditions entre JSX

Il y a deux façons de le faire

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

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

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

Ok psiro, j'ai donc regardé vos exemples, qui fonctionnent tous dans votre situation . Cependant, dès que j'en applique un à mon scénario, j'obtiens toujours une erreur de syntaxe. Comme ici:

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

Et c'est le problème que j'ai avec les fonctions anonymes. Ils créent du code non maintenable. Je ne fais rien de différent de votre exemple. Juste DEUX instructions js dans le code que vous avez présenté. Votre code fonctionne, le mien renvoie une erreur de syntaxe.

Et pourquoi ai-je même BESOIN d'une fonction double-anonyme pour avoir 2 simples instructions js dans une instruction if? Pourquoi votre code fonctionne-t-il, et le mien pas?

Addendum:

Ok, j'ai donc fait quelques inférences basées sur votre code et réalisé que j'avais ajouté encore UNE AUTRE fonction anonyme (l'instruction map ) dans le code. Je l'ai retravaillé en ceci, qui a compilé:

  {(() => {
    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>)
  })()}

Le fait qu'il semble complètement impossible à entretenir est sans importance, je suppose. Mais ce n'est pas grave car ça ne marche TOUJOURS pas! Maintenant, j'obtiens un 'JSON.stringify n'est pas une fonction' au moment de l'exécution, ce qui est bien sûr ridicule. Pourquoi ne puis-je pas faire fonctionner un simple console.log dans reactjs?

ADDENDUM:

Ok, j'ai résolu le problème grâce à toute l'aide. Pour toute autre personne qui a un problème avec plusieurs instructions dans une fonction anonyme, si vous voulez le faire, vous devez ajouter une instruction return afin que la fonction sache quel résultat retourner.

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