I want to display the selected value in return below but i am unable get the data from it it might be a minor issue i am unable to catch

Question

    import { Autocomplete, Stack, TextField } from "@mui/material";
import { Box } from "@mui/system";
import axios from "axios";
import React, { useEffect, useState } from "react";

const SearchProperty = () => {
  const [searchResult, setSearchResult] = useState([]);
  const { saveResult, setSaveResult } = useState('');
console.log(saveResult)
  useEffect(() => {
    axios
      .get(`api/societies/`, {
        headers: {
          Authorization: `Bearer  ${localStorage.getItem("token")}`,
        },
      })
      .then((res) => {
        setSearchResult(res.data);
      });
  }, []);

  return (
    <div className="p-5 px-md-20 px-2xl-40 ">
      <Stack>
        <Autocomplete
          id="SearchProperty"
          getOptionLabel={(searchResult) => `${searchResult.name}`}
          options={searchResult}
          inputValue={saveResult}
          isOptionEqualToValue={(option, value) => option.name === value.name}
          onChange={(event, value) => setSaveResult(value)}
          noOptionsText={"No Such Property Available"}
          renderOption={(props, searchResult) => (
            <Box component="li" {...props} key={searchResult.society_id}>
              {searchResult.name}
            </Box>
          )}
          renderInput={(params) => (
            <TextField fullWidth {...params} label="Search Property By Name" onChange={({ target }) => setSaveResult(target.value)}/>
          )}
        />
      </Stack>
      <div>
        <div className="flex">
       {
            <div>
            <h2>{saveResult?.name}</h2>
            <h2>{saveResult?.society_id}</h2>
            <h2>{saveResult?.name}</h2>
          </div>
       }
        </div>
      </div>
    </div>
  );
};

export default SearchProperty;

my api is working fine i am able to see search result in dropdown i can select the result but i can't save it in my state onChange={(event, value) => console.log(value)} this works

onChange={(event, value) => setSaveResult(value)}

this doesn't work i am getting this error Uncaught TypeError: setSaveResult is not a function

this is A REACT Code I am using MUI Autocomplete

Answer 1

Change your onChange fn.

onChange={(event, v) => {     
   setSaveResult(v)  
 }
}

OnChange you are calling a anonymous function and that function is doing setSaveResult, and you are passing two arguments to anonymous fn, event and value.