CODEWITHSUNDEEP
reactjsmaterial-uiclojurescriptreagent
jstuartmilne
jstuartmilne

Reputation: 4508

Basic Render Props Translation to Reagent

So Im trying to render the MUi Autocomplete with reagent. This is my attempt

(def options
  (clj->js
     [{:title "title" :year 1990}
      {:title "title2" :year 2990}]))

    (defn autocomplete-text-field []
      [:> TextField
        {:label "Headers"
                 :id "header"
                 :variant "outlined"
                 :fullWidth true }
       ]
   )

(defn add-header-form []
  [:> Card
   {:style #js {:max-width 1000}}
   [:> CardHeader {:title "Add Header"}]
   [:> CardContent
    [:> Grid
     {:container true
      :direction "column"}
     [:> Autocomplete
      {
       :renderInput (r/reactify-component autocomplete-text-field)
       :options options
       :getOptionLabel #(get % :year)}

      ]
     ]
    ]]
  )

I tried passing it directly meaning :renderInput autocomplete-text-field But could not figure it out. Im trying to translate the example in the Mui page :

https://material-ui.com/components/autocomplete/

EDIT

<Autocomplete
  options={top100Films}
  getOptionLabel={(option: FilmOptionType) => option.title}
  style={{ width: 300 }}
  renderInput={params => (
    <TextField {...params} label="Combo box" variant="outlined" fullWidth />
  )}
/>

So what im after is how do i write the equivelent reagent code for that renderInput property?

Thanks in advance.

Upvotes: 0

Views: 477

Answers (1)

Thomas Heller
Thomas Heller

Reputation: 4356

renderInput expects a function that returns a React element.

You can do that in reagent via

:renderInput (fn [params] (r/as-element [autocomplete-text-field params]))

params will most likely be a JS object, which means you'll likely need some JS interop to apply whatever props to the textfield. Don't know what kind of params it passes.

Upvotes: 4

Related Questions