Reactjs - 将 API 数据作为道具传递给自动完成组件（Material-UI）

Question

I am a beginner in Reactjs. I am trying to implement the Autocomplete component provided by material-ui. I want to pass the API link as a prop to the element. But how to pass the json label name as a prop to be used in "getOptionLabel"? For example, If we consider this API link which returns TV Show names, we need to use SHOW.NAME to access the name of the show.

getOptionLabel={(option) => option.show.name}

Here, the dynamic part is 'show.name'. How to pass this as prop? I tried doing

const label = 'show.name'

and then

getOptionLabel={(option) => option.label}

But his wouldn't work.

Answer 1

You need to pass the props in the function. You could do something like this:

export default function App() {
  const someData = [{
    name: "abc"
  }]
  return ( <
    Autocomplete myOptions={someData} />
  );
}


export default function ComboBox(props) {
  return ( <
    Autocomplete id = "combo-box-demo"
    options = {
      props.myOptions
    }
    getOptionLabel = {
      (option) => option.name
    }
    style = {
      {
        width: 300
      }
    }
    renderInput = {
      (params) => < TextField { ...params
      }
      label = "Combo box"
      variant = "outlined" / >
    }
    />
  );
}

See it live here