How do I take an object from one file and place it in an array element of another in my React Native app?

I have an excersise app which I am trying to select exercises that are to be recorded for a workout. For what I have so far, I generate a list which can select a muscle category which then displays a list of excersises to be added to the workout. I would like the the options array of a specific muscle category to be generated from a seperate .js file of said category (AbsExerciseList.js)

//AbsExerciseList.js
const abList = [
{ id: '1', label: 'Crunches' }, 
{ id: '2', label: 'Leg Raises' } 
]
export default abList

I then have the supOptions property - which is the list of exercises generated after the category is selected - appear. How would I take the object from AbsExerciseList.js and insert it to the subOptions object/array (specifically for the id: '1' , label: 'abs') element?

I would like to do the same for all other muscle categories as well.

//New WorkourtList.js
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, FlatList } from 'react-native';
import abList from './exercises/AbsExerciseList';
const MyDropDown = () => {
const [selectedOption, setSelectedOption] = useState(null);
const [showOptions, setShowOptions] = useState(false);
const [options, setOptions] = useState([
{
id: '1',
label: 'Abs',
subOptions: [
//Place abList from AbsExerciseList.js here
]
},
{
id: '2',
label: 'Biceps',
subOptions: [
{ id: '1', label: 'Preacher Curl' }, 
{ id: '2', label: 'EZ-Bar Curl' },
{ id: '3', label: 'Alternating Dumbell Curl' }
]
}
//... rest of muscle categories not listed
]);
const handleOptionSelect = (option) => {
setSelectedOption(option);
setShowOptions(false);
};
const renderOption = ({ item }) => (
<TouchableOpacity style={{ padding: 10 }} onPress={() => handleOptionSelect(item)}>
<Text>{item.label}</Text>
</TouchableOpacity>
);
const renderSubOption = ({ item }) => (
<TouchableOpacity style={{ padding: 10 }}>
<Text>{item.label}</Text>
</TouchableOpacity>
);
return (
<View>
<TouchableOpacity onPress={() => setShowOptions(!showOptions)}>
<Text>{selectedOption ? selectedOption.label : 'Select a Category'}</Text>
</TouchableOpacity>
{showOptions && (
<FlatList
data={options}
renderItem={renderOption}
keyExtractor={(item) => item.id}
/>
)}
{selectedOption && (
<FlatList
data={selectedOption.subOptions}
renderItem={renderSubOption}
keyExtractor={(item) => item.id}
/>
)}
</View>
);
};
export default MyDropDown;

I have tried using the map function within the useState() however i am met with, "Warning: Each child in a list should have a unique "key" prop."

I am not sure if I need to create a seperate function outside of useState() or use a different React hook.

If you save all sub Options seperate, then it could look like this:

const abList = [
{ id: "1", label: "Crunches" },
{ id: "2", label: "Leg Raises" }
];
const bicepsList = [
{ id: "1", label: "Preacher Curl" },
{ id: "2", label: "EZ-Bar Curl" },
{ id: "3", label: "Alternating Dumbell Curl" }
];

Then in your functional component, since you are not updating your initial "options" state, you can just alter your "selectedOption" state and append sub Otions into respective array.

Just alter the select handler like this:

const handleOptionSelect = (option) => {
switch (option.id) {
case "1": {
setSelectedOption({
...option,
subOptions: option.subOptions.concat(abList)
});
break;
}
case "2": {
setSelectedOption({
...option,
subOptions: option.subOptions.concat(bicepsList)
});
break;
}
default: {
setSelectedOption({
...option,
subOptions: []
});
break;
}
}
setShowOptions(false);
};

Benefit of option.subOptions.concat(anyList) is you can have default exercises from "options" state already set and append more exercies.