I am using material-ui’s autocomplete for search suggestion. I have implemented some dummy data from json – server.
Now into the autocomplete , I want to render a list of products that exists into my data, but I am facing a problem
when looking on the browser, it says “two children with the same key “productName_(it is one of same product names from my json)” key should be unique”.
But my products have productId field which I made of type<string>
and left vacant, because I want to render uuid() as a product Id, but I don’t know where to put the key into autocomplete.
Also, I don’t want to render a mere list of suggested items, rather I want to render some cards with avatar on the left hand side of them. so where should I put .map() method to do so into MUI Autocomplete?
Here’s my code for autocomplete –
import { Autocomplete, TextField, Typography } from "@mui/material";
import { Fragment, useEffect, useState } from "react";
import uuid from "react-uuid";
import agent from "../../../api/agent";
import { Item } from "../../../models/Job";
import { setCloseMenu, setOpenMenu } from "../../menu/menuSlice";
import { useAppDispatch, useAppSelector } from "../../Redux/reduxStore";
interface Props {
searchTerm? : string;
}
export default function JobSearch ( props : Props ) {
const [ item, setItem ] = useState<item[]>([]);
// using redux
const dispatch = useAppDispatch();
const { status } = useAppSelector ( state => state.menu );
useEffect(() => {
agent.Product.getAutoCompleteProducts() // endpoint to get list of products
.then((item) => {setItem(item); console.log(item)})
.catch((error) => console.log(error))
}, []);
return (
<Fragment>
<Autocomplete
open = { status.name === "autoCompleteMenu" && status.open }
onOpen = { () => {
dispatch(setOpenMenu("autoCompleteMenu"));
}}
onClose = { () => dispatch(setCloseMenu("autoCompleteMenu"))}
options = {item.map((item) =>
item.name
)} // I want options into form of cards with key as uuid() here
renderInput = {(params) => (
<TextField { ...params}
variant = {'outlined'} /> )} />
</Fragment>
)
}
type file for my Items is –
export interface Items {
itemId : string, //uuid() - should be here
itemName : string,
itemPrice : number,
itemDesc : string
}
I want to know 2 things –
- How could I map my own custom layout beneath the autocomplete box, Like I want to map the items into the form of cards, long lengthed cards with avatar on left-side.
- I want to know where am I making a mistake in not supplying the key = {} prop to the autocomplete, please keep a note that I only waNt to supply uuid as a key prop.
and uuid() should be inside myitemId = uuid()
.
All suggestions are welcome.