Había hecho la respuesta con vanilla js pero vi que pusiste la etiqueta de react así que esta es mi respuesta con React.js
Converti los arrays en arrays de objetos para manipularlos mejor.
Componente Select (Frutas, Verduras)
import React from "react";
const options = [
{
id: 1,
label: "Fruta",
value: "fruta"
},
{
id: 2,
label: "Verdura",
value: "verdura"
}
];
const Select1 = ({ setFrutaSelect }) => {
return (
<>
<select onChange={(e) => setFrutaSelect(e.target.value)}>
{options.map((option) => (
<option key={option.id} value={option.value}>
{option.label}
</option>
))}
</select>
</>
);
};
export default Select1;
Componente App.js
import React, { useState } from "react";
import "./styles.css";
import Select1 from "./Select1";
const verdura = [
{ id: 1, label: "Lechuga", value: "lechuga" },
{ id: 2, label: "Acelgas", value: "acelgas" },
{ id: 3, label: "Espinacas", value: "espinacas" },
{ id: 4, label: "Apio", value: "apio" }
];
const fruta = [
{ id: 1, label: "Arándanos", value: "arandanos" },
{ id: 2, label: "Manzana", value: "manzana" },
{ id: 3, label: "Pera", value: "pera" }
];
export default function App() {
const [optionSelect, setFrutaSelect] = useState("");
console.log(optionSelect);
return (
<div className="App">
<Select1 setFrutaSelect={setFrutaSelect} />
{/* Traigo el value de la opcion seleccionada en el componente Select y la capturo con el hook setFrutaSelect*/}
{optionSelect === "fruta" ? (
<select>
{fruta.map((option) => (
<option key={option.id} value={option.value}>
{option.label}
</option>
))}
</select>
) : (
<select>
{verdura.map((option) => (
<option key={option.id} value={option.value}>
{option.label}
</option>
))}
</select>
)}
</div>
);
}