I was wondering of a good way to conditionnally render a list of items. Basically I want to render a warning message, if there's a warning, I want to render message to contain a list of all the problems, here is my current approach :

```js
text = (
 <div>Orange fields are not mandatory, are you sure you want to submit without :
  <ul>
   {(() => {
    if (e.infos.error === "warning")
     return <li>informations</li>
   })()}
   {(() => {
    if (e.links.error === "warning")
     return <li>links</li>
   })()}
   {(() => {
    if (e.file.error === "warning")
     return <li>file</li>
   })()}
  </ul>
 </div>);
```

that's ugly, but I wanted to test something, so another approach I took was something like that :

```js
function optionalWarning(props) {
  if (props.error === "warning")
    return <li>{props.message}</li>;
  return null;
}

....

text = (
 <div>Orange fields are not mandatory, are you sure you want to submit without :
  <ul>
      <optionalWarning error="e.infos.error" message="informations" />
      <optionalWarning error="e.links.error" message="links" />
      <optionalWarning error="e.file.error" message="file" />
  </ul>
 </div>);
```

This is prettier, but I don't like the fact that I have to make an external functions to do that, I suppose the best practise is the second one, but are there other ways to do that ?