Alexsander da Rosa
Alexsander da Rosa

Reputation: 43

Simple way to update a form field from an API request

Sandbox: https://codesandbox.io/s/objective-leakey-v1mic?file=/src/App.js

When you click in the "Search" icon on the zipcode field the app fetches "posts/2" from the mockup server (simulating an actual ZIP Code API). I want to update the "address.street" form field with the title of the post -- in this case, write "qui est esse" over "Victor Plains". The title appears on Console (printscreen below).

How do I do it? I've tried useForm in the Sandbox, it's commented out because it did not work. Actually I've tried a lot of things. I used Delphi 20 years ago, it would be trivial to do it there:

   EditStreet.Text := resp.title;

Current code:

import { Edit, SimpleForm, TextInput } from "react-admin";
import { InputAdornment, IconButton } from "@material-ui/core";
import Search from "@material-ui/icons/Search";
import jsonServerProvider from "ra-data-json-server";
//import { useForm } from "react-final-form";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

export const UserEdit = (props) => {
  const HandleClick = () => {
    //const { change } = useForm();
    //var newStreet = "";

    dataProvider
      .getList("posts", {
        sort: { field: "id", order: "ASC" },
        pagination: { page: 1, perPage: 50 },
        filter: { id: 2 }
      })
      .then((response) => {
        var resp = response.data[0];
        console.log(resp);
        //--- how to update the screen?
        //newStreet = resp.title;
        // EditStreet.Text := resp.title;
        //change("address.street", newStreet);
      })
      .catch((e) => {
        console.log(e.message);
      });
    //change("address.street", newStreet);
  };

  return (
    <Edit {...props}>
      <SimpleForm>
        <TextInput source="id" />
        <TextInput source="name" />
        <TextInput
          source="address.zipcode"
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <IconButton onClick={HandleClick}>
                  <Search />
                </IconButton>
              </InputAdornment>
            )
          }}
        />
        <TextInput source="address.street" />
        <TextInput source="address.suite" />
        <TextInput source="address.city" />
      </SimpleForm>
    </Edit>
  );
};

Is there a simple way to do it with React-Admin? By "simple" I mean less than 20 lines of code.

React Admin Tutorial Printscreen

Upvotes: 0

Views: 807

Answers (1)

Alexsander da Rosa
Alexsander da Rosa

Reputation: 43

I've managed to make it work. Here's the new code:

import { Edit, SimpleForm, TextInput } from "react-admin";
import { InputAdornment, IconButton } from "@material-ui/core";
import Search from "@material-ui/icons/Search";
import jsonServerProvider from "ra-data-json-server";
import { useForm } from "react-final-form";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

export const ZipLookUp = ({ record }) => {
  const form = useForm();
  const HandleClick = (event) => {
    console.log("record", record);
    console.log("event", event);

    dataProvider
      .getList("posts", {
        sort: { field: "id", order: "ASC" },
        pagination: { page: 1, perPage: 50 },
        filter: { id: 2 }
      })
      .then((response) => {
        var resp = response.data[0];
        console.log(resp);
        //--- how to update the screen?
        form.change("name", resp.title);
      })
      .catch((e) => {
        console.log(e.message);
      });
  };

  return (
    <TextInput
      source="address.zipcode"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton onClick={HandleClick}>
              <Search />
            </IconButton>
          </InputAdornment>
        )
      }}
    />
  );
};

export const UserEdit = (props) => {
  return (
    <Edit {...props}>
      <SimpleForm {...props}>
        <TextInput source="id" />
        <TextInput source="name" />
        <ZipLookUp />
        <TextInput source="address.street" />
        <TextInput source="address.suite" />
        <TextInput source="address.city" />
      </SimpleForm>
    </Edit>
  );
};

Here's the updated Sandbox:

https://codesandbox.io/s/still-lake-8p9sx?file=/src/users.js

Upvotes: 1

Related Questions