redux-form: need help in understanding syntax

Question

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 ?

Answer 1

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.