CODEWITHSUNDEEP
reactjsmaterial-ui
YeisonM
YeisonM

Reputation: 597

material ui lab autocomplete its not working

@material-ui/lab/Autocomplete its not working for me, just don't allow me to select and option and the placeholder it's always ther even if a type,

here: enter image description here

here it's my code:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

export default function FreeSolo() {
  return (
    <div style={{ width: 300 }}>
      <Autocomplete
        id="free-solo-demo"
        freeSolo
        options={top100Films.map(option => option.title)}
        renderInput={params => (
          <TextField {...params} label="freeSolo"   onInputValueChange={event: React.ChangeEvent<{}>, value: any} => void margin="normal" variant="outlined" fullWidth />
        )}
      />
    </div>
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 }
];

it is the same code og the documentation but it doesn't work.

maybe can be something with the version, here is part of my package.json

{
  "name": "....",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.5.0",
    "@material-ui/icons": "^4.4.3",
    "@material-ui/lab": "^4.0.0-alpha.39",
    "axios": "^0.19.0",
    "date-and-time": "^0.10.0",
    "downshift": "^4.0.4",
    "firebase": "^7.2.2",
    "notistack": "^0.9.7",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-hooks": "^1.0.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0"
  },

}

Upvotes: 3

Views: 8330

Answers (1)

Lazar Nikolic
Lazar Nikolic

Reputation: 4394

You made at least two errors.

  1. You should use latest for @material-ui/lab so it should be "@material-ui/lab": "latest", in package.json

  2. You should not use map to get only titles of the movies in options

  3. onInputValueChange does not exist in your code and there is no such props in API of MaterialUI. Also, you are returning void from that function which is undefined.

I created codesandbox with functioning component that you need and you can find it here: https://codesandbox.io/s/material-demo-vexgl

Upvotes: 3

Related Questions