Can you help convert this React/JS to ReNatal Clojurescript?

[Webdev_Tory]

Trying to understand code here, and I find that the Javascript is defying my ability to translate to Clojure[script]:

Input · React Native Elements

I find the following code and don’t understand the use of curly brackets.

Q1: What is the leftIcon={{...}} doing, and how is it different than just using one pair of braces to define an object?

Q2: What is size={24} doing? If destructuring, what is it destructuring?

<Input
  placeholder='INPUT WITH ICON'
  leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}
/>

<Input
  placeholder='INPUT WITH CUSTOM ICON'
  leftIcon={
    <Icon
      name='user'
      size={24}
      color='black'
    />
  }
/>

I’ve got the dependencies working ok, but any suggestions on how to translate the rest of these things in my Renatal app?

[thheller]

The {} syntax in JSX is used to indicate JS values (as opposed to "" for strings). So any time you see {} the value will be passed to the component as the actual JS value. size={24} means that size is set as a number whereas size="42" or size=42 would receive the "24" as a string.

leftIcon={{ type: 'font-awesome', name: 'chevron-left' }} just means that the actual object is passed. So for reagent this would be {:leftIcon #js {:type "font-awesome" :name "chevron-left"}}

This has nothing to do with destructuring.

[Webdev_Tory]

So for size = {24}, can I just do :size 24 or do I need to be fancier?

[thheller]

:size 24 is exactly what you want yes.