Kendo React Form Field on-render values

[Robert]

Hi there. I am working with Kendo react forms and am rendering them via the map function. So, on render I call an api which returns a list of elements ( it can vary from 0 to 100+) and then I put it in a state. After that I do  a map function and depending on the element id I render a Form Field like this:

           component={ 
                      tada.tpodatka_id === 1 ?Input: 
                      tada.tpodatka_id === 2 ?Input: 
                      tada.tpodatka_id === 3 ?DatePicker: 
                      tada.tpodatka_id === 4 ?DropDownList:
                      tada.tpodatka_id === 5 ?TextArea : // MultiLine
                      tada.tpodatka_id === 6 ?DropDownList:
                      tada.tpodatka_id === 7 ?DropDownList:
                      tada.tpodatka_id === 8 ?MultiSelect:
                      tada.tpodatka_id === 9 ?MultiSelect:
                      Input
                      }

That API, along with the element type, returns their current values. How can I assign on-render values to, for example, a dropdown or input in a Form? I tried this for a Input element but it didn't show the tada.txt_value on render:

<Field
          required={tada.obavezan === 1 ? true : false}
          name={tada.naziv}
          component={ Input }
          label={tada.naziv}
          value={ tada.txt_value }
/>

What am I doing wrong?

 

[Robert]

I tried it with initialValues also:

<Form
      // onSubmit={handleSubmit}
      onSubmitClick={handleSubmitClick}
      render={(formRenderProps) => (
        <FormElement
          style={{
            maxWidth: 650,
          }}
initialValues={tempAtr.map((tada) =>(
    tada.tpodatka_id === 1 ? `${tada.naziv}: ${tada.txt_value}`:
tada.tpodatka_id === 2 ? `${tada.naziv}: ${tada.txt_value}`:
tada.tpodatka_id === 3 ?`${tada.naziv}: ${tada.date_value}`:
tada.tpodatka_id === 4 ?`${tada.naziv}:{name: ${tada.txt_value},id: ${tada.num_value}}`:
tada.tpodatka_id === 5 ?`${tada.naziv}: ${tada.txt_value}`:
tada.tpodatka_id === 6 ?`${tada.naziv}:{name: ${tada.txt_value},id: ${tada.num_value}}`:
tada.tpodatka_id === 7 ?`${tada.naziv}:{name: ${tada.txt_value},id: ${tada.num_value}}`:
tada.tpodatka_id === 8 ?`${tada.naziv}:{name: ${tada.txt_value},id: ${tada.num_value}}`:
tada.tpodatka_id === 9 ? `${tada.naziv}:{name: ${tada.txt_value},id: ${tada.num_value}}`:
            `${tada.naziv}: ${tada.txt_value}`
          ))}

[Konstantin Dikov]

Hello Robert,

I have answered in the ticket that you have opened with the same question. If further questions arise I would suggest that we continue the conversation in the ticket system.

I am also sharing the example that I have prepared, so that other developers with similar question land on this thread:

• https://stackblitz.com/edit/react-wi7unf?file=app%2Fmain.tsx

 

Regards,
Konstantin Dikov
Progress Telerik