React - NextJS Select - How to loop through object with values in fetch and return only values that exist

To Answer The first parst of your question you can map over this Array of Objects with this method for example using the .map method

React Code SandBox

MDN-.map() method JS

export const seasonOptions = [
  { value: 8471214, label: "198601987" },
  { value: 8471215, label: "198701988" },
  { value: 8471216, label: "198801989" },
  { value: 8471217, label: "198901990" },
  { value: 8471218, label: "199001991" },
  { value: 8471219, label: "199101992" },
  { value: 8471220, label: "199201993" },
  { value: 8471221, label: "199301994" },
  { value: 8471222, label: "199401995" },
  { value: 8471223, label: "199501996" },
];
    
//MAKE SURE TO MAP OVER THE <option></option> tag not the <Select/> 
//CHECK CODE SANDBOX FOR EXAMPLE IN PURE HTML5 AND REACT 
      {seasonOptions.map((option,index)=>
        <Select
        key={index}
        id="select"
        instanceId={"select"}
        options={option?.value}
        placeholder={option?.label}
        autoFocus
        value={select.value}
        onChange={handler}
      />
        
        )}

Check Out my Answer Here or for other examples here how to map over an array and access it values this method is just 1 of many .

How to find a value from array object in JavaScript? Stack Over Flow Question

For the Second Part Of the Question you can use the new SandBox

• Steps

1. Change the value property here from a string to a number by removing the quotation marks export const seasonOptions = [{value: 8471214, label: "198601987"},]

2. Assign a useState hook to handle the active filtered item const [activeFilter, setActiveFilter] = useState([]);

3.Assign an arrow function to handle Filtering the Seasons using the setTimeOut() method setTimeout()-MDN-DOCS Where 500 is the time the function is executed for that time and

const handleSeasonsFilter = (item) => {
    setActiveFilter(item);

    setTimeout(() => {
      if (!item) {
        setFilterSeasons(item);
      } else {
        setFilterSeasons(
          seasonOptions.filter((season) =>
            seasonOptions?.includes(season?.label)
          )
        );
      }
    }, 500);
  };

4. Pass that to url that searches the API url = `https://statsapi.web.nhl.com/api/v1/people/${activeFilter}/stats?stats=statsSingleSeason&season=200402005 Like in Line 65 in The Sand Box

5. Display Them using useEffect() hook also add in the values in the dependency array or leave it empty to avoid infinite loops.

  useEffect(() => {
    //debug data
    console.log(stringDataDisplay);
    setActiveFilter(activeFilter);
    //DEBUG IF VALUE IF PASSED
    //setDatasearched(activeFilter);
  }, [
    /**EMPTY DEPENDENCY ARRAY TO AVOID INFINITE LOOPS */
    stringDataDisplay,
    activeFilter
  ]);

in My Example i Displayed Them using another useState Hook and State action
const [datasearched, setDatasearched] = useState([])

& Finally Just Assigned a new const stringDataDisplay = JSON.stringify([datasearched]); To Stringify the [datasearched] Array Here.

Note Make sure to pass the handleSeasonsFilter to OnClick as an empty arrow function and pass the option.value property as a String so the API Accepts the request.

Hope this helps with your Example and Ill try to Check the code sandbox also with your method.

Bear in Mind i still i am developing this and i understand you want the values of the seasons to be shown when no player id is selected Am i correct?