How to show the initial value of a select component on Material Tailwind React Select Component with options that are mapped?

Question

Apparently in the example of using the select component, the options of the Select are not mapped and are singular objects on their own. Currently I am trying to make a select component that shows the outlets that I fetched from the API, therefore all the options are mapped from the array that is fetched from the API.

The options are shown but I can't manage to show the initial value, hence making the component empty. For the purpose of recreating this problem, I've made a temporary array of the outlet. Any thoughts or ideas on how to do it?

import { Option, Select } from "@material-tailwind/react";
import React, {  useState } from "react";

const outletList = [
  {
    "outletid": 18,
    "storeid": "001",
    "name": "Main Street Store",
    "address": "123 Main Street",
    "storedesc": "This is our flagship store located on Main Street.",
    "status": "Operational",
    
  },
  {
    "outletid": 19,
    "storeid": "002",
    "name": "Downtown Outlet",
    "address": "456 Downtown Avenue",
    "storedesc": "Our outlet in the heart of downtown.",
    "status": "Operational",
    
  },
  {
    "outletid": 20,
    "storeid": "003",
    "name": "Suburbia Mall Store",
    "address": "789 Suburbia Mall",
    "storedesc": "Located in the Suburbia Mall, offering convenient shopping.",
    "status": "Operational",
    
  },
  {
    "outletid": 21,
    "storeid": "004",
    "name": "Beachside Outlet",
    "address": "321 Beachfront Road",
    "storedesc": "Enjoy shopping with a view of the ocean.",
    "status": "Suspended",
    "company": "TheIceCreamBar"
  },
  {
    "outletid": 22,
    "storeid": "005",
    "name": "Industrial Park Store",
    "address": "555 Industrial Avenue",
    "storedesc": "Catering to the needs of businesses in the industrial park.",
    "status": "Operational",
    
  },
  {
    "outletid": 23,
    "storeid": "HQ001",
    "name": "Headquarters",
    "address": "123 HQ Street",
    "storedesc": "Main headquarters of the company.",
    "status": "Operational",
    
  }
]

function SelectOutlet({ user }) {

  const defaultValue = user.length > 0 ? user[0].defaultoutlet : null;
  const defaultOutlet = outletList.find(outlet => outlet.outletid === defaultValue);
  const [value, setValue] = useState(defaultOutlet ? defaultOutlet.name : "");


  


  const handleSelect = (selectedValue) => {
    console.log("event",selectedValue)
    setValue(selectedValue);
  };

  return (
    <div className="my-auto px-2">
      <Select
        size="lg"
        label="Select Outlet"
        selected={value}
        onChange={handleSelect}
        className="text-lg"
        containerProps={{ className: "h-16" }}
      >
        {outletList.map((outlet) => (
          <Option key={outlet.outletid} value={outlet.name}>
            {outlet.storeid} {outlet.name}
          </Option>
        ))}
      </Select>
    </div>
  );
}

export default SelectOutlet;

So the flow of getting the initial outlet is like this: there is a default value received from the user prop. For example, user.defaultoutlet = 18. So I try to match the default outlet to the outletarray to get the corresponding name for it. So far, the object defaultOutlet's result managed to match its corresponding name, however the value object itself only gets undefined.

Answer 1

try to change your selected prop to value

    <Select
        size="lg"
        label="Select Outlet"
        value={value}
        onChange={handleSelect}
        className="text-lg"
        containerProps={{ className: "h-16" }}
    >