React Pull Data from Tabletop to Multiselect

Question

Trying to populate a Multiselect list using Tabletop for a Google spreadsheet.

No problem getting data from tabletop, but when trying to send it to Multiselect e creates a empty array and brakes the handleChange function.

My code is

import React, { Component } from "react";
import MultiSelect from "@kenshooui/react-multi-select";
import "@kenshooui/react-multi-select/dist/style.css";
import Tabletop from "tabletop";

class Multilist extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      data: [],
      selectedItems: []
    };
  }

  componentDidMount() {
    //Getting Data Using Tabletop
    Tabletop.init({
      key: "1FfaIvaqL_819zzOz3--ghyrdwqMSLiEsS0tR6NVyqcM",
      callback: googleData => {
        this.setState({
          data: googleData
        });
        console.log("google sheet data --->", googleData);
      },
      simpleSheet: true
    });
  }

  handleChange(selectedItems) {
    this.setState({ selectedItems });
  }

  render() {
    console.log("my data is nome ", this.state.data);
    const { selectedItems } = this.state;

    return (
      <div>
        <h1>Hello WOrld</h1>
        <MultiSelect
          items={this.state.data}
          uniqueKey="id"
          selectedItems={selectedItems}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default Multilist;

Answer 1

I just understood what i was doing wrong.

My googleData was formated like

 [{name:xpto, age:42}, {name:abc, age:54}]

, when i change "name" into "label", it works!! :)

So my googleData spreadsheet should be something like

[{label:xpto, age:42}, {label:abc, age:54}]

So the code that is working for me is:

render(){
const { selectedItems, data } = this.state;
    return (
      <div>
        <h1>Hello WOrld</h1>
        <MultiSelect
          items={data}
          selectedItems={selectedItems}
          onChange={this.handleChange}
        />
 );
  }

One question if anyone can help, because i have data coming from a google spread sheet, is there a way to make a change or tell the app that the column i want for label is the column with the name "Nome".

Something like

let label = row.Nome

if it makes any sense.. Thanks