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 }
/>
1 Answer, 1 is accepted
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:
Regards,
Konstantin Dikov
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
<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}` ))}