CODEWITHSUNDEEP
reactjsjsxredux-form
Santhosh
Santhosh

Reputation: 11834

redux-form: need help in understanding syntax

I am going through the video of redux-form. I found the following code:

const renderInput = ({ input, meta, label}) =>
      <div>
        <label>{label}</label>
        <input {...input} />
        {meta.error &&
          <span>
            {meta.error}
          </span>}
      </div>

I did not understand the below segment:

    {meta.error &&
      <span>
        {meta.error}
      </span>}

Can we use jsx inside {} ? Here <span> is used inside {}. I thought only javascript variables or expressions are used ?

Upvotes: 0

Views: 39

Answers (2)

Dane
Dane

Reputation: 9552

Adding to @gustavohenke's answer, the code segment

  <div>
    <label>{label}</label>
    <input {...input} />
    {meta.error &&
      <span>
        {meta.error}
      </span>}
  </div>

is used to conditionally render a <span> element containing the contents (possibly error message) of meta.error, if meta.error has some value. The code uses short circuit evaluation to do the same. Hope you get it now!

Upvotes: 1

gustavohenke
gustavohenke

Reputation: 41440

Yes, this syntax is allowed.
Let me quote some parts of the docs...

Embedding Expressions in JSX

You can embed any JavaScript expression in JSX by wrapping it in curly braces.

Link

JSX is an expression too

After compilation, JSX expressions become regular JavaScript objects.

Link

These two sentences complete each other in regards to what is allowed within JSX.

Because its output is simply JS, you can recursively embed JS blocks in JSX elements with other JSX elements in them and so on.
It's perfectly fine.

Upvotes: 1

Related Questions