Ternary Operators in custom react component

[ovryu]

I am creating a custom react component which maps a list to display based on the model data. This model can be null, until a parameter is passed to my query which then returns back the data.

If the data in the model is null I would like to show a message, if not null then display the list returning back from the query.

I believe I will be able to add a ternary operator in the custom component code based on documentation here: https://docs.retool.com/docs/javascript-in-retool

When doing so my custom component no longer shows so I am under the impression it is erroring or i'm not able to do so? How can I add this condition to check for null in my custon react component?

Here is my code snippet:

<Card>
      {{ getErrorList.data.getValidation.length ? (
      <ul class="text-red"> 
        <li> List of errors:  </li>
        {model.validation.map((err) => (
        <li>{err.errorMessage}</li>
        ))}
      </ul>
      ) : (<p>Data is null</p>)}}
      
    </Card>

[lauren.gus]

@ovryu

Hey there You are able to use ternary operators in custom components, here is a quick example below:

The first thing that stands out to me in your code snippet is that everything is wrapped in double curlies when it looks like it should only be {} Hope this helps!\