0

I have a standard text input in my code base

I have a use case where I need to call the change function in react final form and set a value, but I need the text value to read something else.

For example

const NameInput = () => {
  return (
    <div>
      <label htmlFor="name">Name:</label>
      <Field name="name" component="input" type="text" placeholder="Enter your name" />
    </div>
  );
};


const MyForm = () => {
  const onSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form
      onSubmit={onSubmit}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <NameInput />
          {/* Include other form fields */}
          <button type="submit">Submit</button>
        </form>
      )}
    />
  );
};

Then in a separate hook I call the change function change('name', 'Jack')

This sets the form state to Jack, and the text box now reads Jack. However when the form state is Jack, I wan't to show something else in the text box.

reactdev1231231
  • 45
  • 5
  • See [Controlled and uncontrolled components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). – jsejcksn Jun 05 '23 at 15:04
  • Does this answer your question? [What are React controlled components and uncontrolled components?](https://stackoverflow.com/questions/42522515/what-are-react-controlled-components-and-uncontrolled-components) – jsejcksn Jun 05 '23 at 15:04

0 Answers0