CODEWITHSUNDEEP
javascriptreactjstypescriptgraphqlreact-select
Eduardo Ribeiro
Eduardo Ribeiro

Reputation: 97

React-Select with GraphQL

How do I put the query values in the select options? I tried to make a map of the array but the values do not appear. I know the values are come cause the log in the query but I don`t know how to load they in the select.

  const { data: admData, loading } = useQuery(GET_DIRECTOR_USERS, {
    onError: (error) => {
      console.log("erro", error);
    },
    onCompleted: (users) => {
      console.log(admData);
    },
  });
  
  
  
        return (
        <Container>
          <Form onSubmit={handleSubmit}>
            <Label>ASSOCIADO A QUAL DIRETOR</Label>
            {!loading && (
              <Select
                className="s"
                theme={(theme) => ({
                  ...theme,
                  borderRadius: 10,
                  colors: {
                    ...theme.colors,
                    primary: "#d3d3d3",
                  },
                })}
                name="adm_director_id"
                placeholder=""
                options={admData.getDirectorUsers.map(
                  (users: any) => users.name
                )}
              />
            )}
          </Form>
        </Container>
      );

Upvotes: 1

Views: 868

Answers (1)

leonardfactory
leonardfactory

Reputation: 3501

You shoul map API values to Select option objects, like:

options={admData.getDirectorUsers.map(user => ({ label: user.name, value: user.id });

in react-select each option should be an object { label: string, value: string } (you can include even other keys in the object, but these are necessary).

Docs here

Upvotes: 1

Related Questions