I know the question is confusing So the problem here is that I am retriving the data into dropdown by map method, that data comes from backend.
And then here is a Object that I am creating on front-end side of application that have field things in it.
const [dataType, setDataType] = useState('none')
const addGraph = (thisData) => {
const graphToAdd = apiResponse.find(curr => curr.name === thisData)
const newGraph = {
type: graphType,
labels: graphToAdd.labels,
things: (dataType === 'age' ? graphToAdd.age : (dataType === 'stipend' ? graphToAdd.stipend : graphToAdd.attendance))
}
setGraphs((previous) => [...previous, newGraph])
}
<!-- begin snippet: js hide: false console: true babel: false --> <label htmlFor="dataTypes" style={{'fontWeight':'bold'}}>Data Type:</label>
<select className='py-2 px-3 rounded-sm mt-2 border-3 border-black' name="dataTypes" id="dataTypes" onChange={(e) => setDataType(e.target.value)}>
{
objectKey.map((curr) => (
<option key={curr} className='py-2 px-3 rounded-sm mt-2 border-3 ' value={curr}>{curr}</option>
))
}
</select>and here is the code for dropdown. I really don't have any idea how should I make"things" key in the object so that for any value that I select I should exactly retrive the data from graph to add. All the data map into the dropdown is sure present in graphToAdd in key: value pair. Also sorry If I am not explaining it correctly.
if data contains other keys then those other keys were mapped into this dropdown.
What should be an approach to do this ?