After selected value the result shows [object object]

[yuripramos]

• downshift version: 1.28.1
• node version: 6.11.4
• npm (or yarn) version: 3.10.10

Hello guys, my problem is, I've passed an array of objects inside the items prop, now when I select some value my input updates to [object object] but what I need is item.name, I'm seeking like crazy through the documentation and on issues but with no success, could someone help me how to display only the name of my object selected?

Thanks

My code:

<BasicAutocomplete
              items={[
                {
                  name: "Cristiano Moura",
                  cpf: 13213213212,
                  card: { name: "Elo Corporate", number: 21312312 },
                  company: { name: "accenture", id: 213213 }
                },
                {
                  name: "Jessica Pires",
                  cpf: 13213213212,
                  card: { name: "Elo Corporate", number: 21312312 },
                  company: { name: "accenture", id: 213213 }
                },
                {
                  name: "Juliano Castro",
                  cpf: 13213213212,
                  card: { name: "Elo Corporate", number: 21312312 },
                  company: { name: "accenture", id: 213213 }
                },
                {
                  name: "Deammn Jordan",
                  cpf: 13213213212,
                  card: { name: "Elo Corporate", number: 21312312 },
                  company: { name: "accenture", id: 213213 }
                },
                {
                  name: "Carla Pires Siqueira",
                  cpf: 13213213212,
                  card: { name: "Elo Corporate", number: 21312312 },
                  company: { name: "accenture", id: 213213 }
                },
                {
                  name: "Jessica Magalhães",
                  cpf: 13213213211,
                  card: { name: "Elo Corporate", number: 21312312 },
                  company: { name: "accenture", id: 213213 }
                },
                {
                  name: "Luisa Bomtempo",
                  cpf: 13213213211,
                  card: { name: "Elo Corporate", number: 21312312 },
                  company: { name: "accenture", id: 213213 }
                },
                {
                  name: "Carolina Salimm",
                  cpf: 13213213212,
                  card: { name: "Elo Corporate", number: 21312312 },
                  company: { name: "accenture", id: 213213 }
                }
              ]}
              onChange={selectedItem => console.log(selectedItem.name)}
            />

      <Downshift
        onChange={onChange}
        render={({
          getItemProps,
          getInputProps,
          isOpen,
          inputValue,
          selectedItem,
          highlightedIndex,
          itemToString
        }) => (
          <div style={{ width: "100%" }}>
            <Input
              name="AutoComplete"
              type="text"
              error
              placeholder="Digite o Nome"
              IconRight={() => <Search />}
              {...getInputProps({})}
            />
            {isOpen ? (
              <div
                style={{
                  boxShadow: "0 0 4px 0 rgba(4, 21, 59, 0.15)",
                  marginTop: 10,
                  borderRadius: 8
                }}
              >
                <div
                  style={{
                    padding: "18px 15px",
                    color: "#04153b",
                    fontWeight: 600,
                    background: "white"
                  }}
                >
                  Portadores Cadastrados
                </div>
                {items
                  .filter(i => i.name.toLowerCase().includes(inputValue.toLowerCase()))
                  .map((item, index) => (
                    <div
                      {...getItemProps({ item })}
                      key={item.name}
                      style={{
                        backgroundColor:
                          highlightedIndex === index ? "rgba(74, 144, 226, 0.08)" : "white",
                        border:
                          highlightedIndex === index
                            ? "solid 1px rgba(4, 21, 59, 0.3)"
                            : "solid 1px rgba(4, 21, 59, 0.10)",
                        borderLeft: highlightedIndex === index && null,
                        borderRight: highlightedIndex === index && null,
                        fontWeight: selectedItem === item ? "bold" : "normal",
                        borderBottomLeftRadius: index === items.length - 1 ? 8 : null,
                        borderBottomRightRadius: index === items.length - 1 ? 8 : null,
                        height: 64,
                        padding: "15px 15px 18px 15px",
                        cursor: "pointer",
                        alignItems: "center"
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          flexWrap: "wrap",
                          alignItems: "center"
                        }}
                      >
                        <div
                          style={{
                            order: 1,
                            width: "33%",
                            flexDirection: "column",
                            display: "flex"
                          }}
                        >
                          <span style={{ fontWeight: 600 }}>{item.name}</span>
                          <span style={{}}>{formatCpf(item.cpf)}</span>
                        </div>
                        <div
                          style={{
                            order: 2,
                            width: "33%",
                            flexDirection: "column",
                            display: "flex"
                          }}
                        >
                          <span style={{ fontWeight: 600 }}>{item.card.name}</span>
                          <span style={{}}>{item.card.number}</span>
                        </div>
                        <div
                          style={{
                            order: 3,
                            width: "33%",
                            flexDirection: "column",
                            display: "flex"
                          }}
                        >
                          <span style={{ fontWeight: 600 }}>{item.company.name}</span>
                          <span style={{}}>{item.company.id}</span>
                        </div>
                      </div>
                    </div>
                  ))}
              </div>
            ) : null}
          </div>
        )}
      />
    </Fragment>

[kentcdodds]

Hi @yuripramos, :wave:

You need to use the itemToString prop:

<Downshift itemToString={item => item ? item.name : ''} />

Good luck!