Value from input field does not display-CodePudding

I am trying to set the value inside an input in a Form component using KendoReact but the value is not displayed and upon debugging I see that the value is not defined. What am I doing wrong and what is the right approach here? Here is my code:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Form, Field, FormElement } from '@progress/kendo-react-form';
import { Input } from '@progress/kendo-react-inputs';

const InputField1 = (fieldRenderProps) => {
  const { label, value } = fieldRenderProps;
  return (
    <div>
      <Input label={label} value={value} />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Form
        render={(formRenderProps) => (
          <>
            <br />
            <br />
            <div>
              <Field
                name="Field1"
                label="Field1 Label"
                component={InputField1}
                value="value1"
              />
            </div>
            <br />
            <br />
          </>
        )}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

CodePudding user response：

const MyCustomInput = (fieldRenderProps) => {
const {label, value, onChange} = fieldRenderProps;
return (
    <Input label={label} value={value} onChange={onChange} />
);
};

const App = () => {
const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
return (
    <Form
        onSubmit={handleSubmit}
        render={(formRenderProps) => (
            <FormElement style={{maxWidth: 650}}>
                <Field name={'firstName'} label={'First Name'} component={MyCustomInput} />
                <div className="k-form-buttons">
                    <button type={'submit'} disabled= 
{!formRenderProps.allowSubmit} className={'k-button'}>
                        Submit
                    </button>
                </div>
            </FormElement>
        )}
    />
    );
 };
 ReactDOM.render(
<App />,
document.querySelector('my-app')
);

you have to add onChange in input tag

CodePudding user response：

Here is a working codesandbox You have to pass the other props to the Input:

const InputField1 = (fieldRenderProps) => {
  const { label, value, ...others } = fieldRenderProps;
  console.log(value);
  return (
    <div>
      <Input label={label} value={value} {...others} />
    </div>
  );
};