<\/span><\/h2>\nTo get the value from the Autocomplete Material UI component, you need to utilize the onChange event handler. The value can be accessed by passing the event object to the handler and retrieving the selected value from it. Here’s an example of how to implement it:<\/p>\n
“`jsx
\nimport React, { useState } from “react”;
\nimport Autocomplete from “@material-ui\/lab\/Autocomplete”;
\nimport TextField from “@material-ui\/core\/TextField”;<\/p>\n
function AutocompleteExample() {
\n const [selectedValue, setSelectedValue] = useState(null);<\/p>\n
const handleChange = (event, value) => {
\n setSelectedValue(value);
\n };<\/p>\n
return (
\n \n options={[“Option 1”, “Option 2”, “Option 3”]}
\n onChange={handleChange}
\n renderInput={(params) => (
\n
\n )}
\n \/>
\n );
\n}<\/p>\n
export default AutocompleteExample;
\n“`<\/p>\n
In this example, the selected value is stored in the `selectedValue` state variable using the `useState` hook. The `handleChange` function is responsible for updating the value whenever the user selects an option. By calling `setSelectedValue(value)`, the selected value is saved and can be used elsewhere in your application.<\/p>\n
By utilizing the `onChange` event handler and storing the selected value in a state variable, you can easily obtain the value from the Autocomplete Material UI component.<\/b><\/p>\n