Select html without React Select

[brunodsazevedo]

I'm using another form styling package instead of React Select. As in the documentation there is no instruction to implement a select in just HTML, I would like to know how to be implementing it in my Select component.

I'm using Typescript.

[jpedroschmitz]

Hey @brunodsazevedo, I've created this example of a select component that doesn't use React Select.

Hope it helps!

[jpedroschmitz]

I created a PR to add this example to the repo! #380

[brunodsazevedo]

Hi @jpedroschmitz ! In the case of your example, it worked on my project. I even apologize for the delay in my return. However, I found another problem to make a setInitialData, where in my database, I make a map of my api response to insert the values ​​of the options in my initial state, but the defaultValue does not load inserted in my state. Here is a sample test code that I performed on your first sample:

import { useEffect, useRef, useState } from "react";
import { SubmitHandler, FormHandles } from "@unform/core";
import { Form } from "@unform/web";

import Select from "./components/Select";

interface FormData {
  username: string;
}

export default function App() {
  const formRef = useRef<FormHandles>(null);
  const [ initialData, setData ] = useState({});

  const handleSubmit: SubmitHandler<FormData> = (data, { reset }) => {
    if (!data.username) {
      formRef.current?.setFieldError("username", "choose a username");
    }

    console.log(data);

    reset();
  };

  const selectOptions = [
    { value: "jpedroschmitz", label: "jpedroschmitz" },
    { value: "rocketseat", label: "Rocketseat" }
  ];

  useEffect(()=>{
    setTimeout(()=>{
      setData({username: "rocketseat"});
    }, 1000);
  });

  return (
    <Form initialData={initialData} ref={formRef} onSubmit={handleSubmit}>
      <Select
        name="username"
        label="Choose a username"
        options={selectOptions}
      />

      <button type="submit">Submit</button>
    </Form>
  );
}

[jpedroschmitz]

If you need to set the data from an API, you should use the formRef.current.setData method.
initialData will only work if you have your data on the first render. It can't be updated after rendering.

Check this guide

[brunodsazevedo]

Hello jpedroschmitz, using unform no select as directed, a very interesting question arose.

I deployed the application in a dev environment, simulating the production environment, and realized that my selects fed in my first render in useEffect, was not loading my default value according to my api response, and in my localhost environment, all the information in select carried perfectly.

analyzing the situation a little, I realized that my options for my selects are loaded synchronously, and not asynchronously, as shown in the documentation using the React Select library.

the question now is, how to apply an asynchronous options function in the situation where I created my select without using any other library?