I am fairly new to React and am making an app in which I have to call an API inside the map function or so I think.
First, I call an API which returns a list of elements that are rendered in a kendo form like this:
import { Form, Field, FormElement } from "@progress/kendo-react-form";
...
const [tempAtr, setTempAtr] = useState([]);
...
const resAtr = await services.getTemplateSessionAtributi(sesijaV);
setTempAtr(resAtr.data.rlista); //tempAtr is filled with a list of elements (attributes)
...
{tempAtr.map((data) =>
<Field
required={data.required=== 1 ? true : false}
disabled={data.read_only === 1 ? true : false}
name={data.name}
component={
data.tpodatka_id === 1 ?Input:
data.tpodatka_id === 2 ?Input:
data.tpodatka_id === 3 ?DatePicker:
data.tpodatka_id === 4 ?DropDownList:
data.tpodatka_id === 5 ?TextArea :
data.tpodatka_id === 6 ?DropDownList:
data.tpodatka_id === 7 ?DropDownList:
data.tpodatka_id === 8 ?MultiSelect:
data.tpodatka_id === 9 ?MultiSelect:
Input}
label={data.name}
data={
data.tpodatka_id === (4 || 6 || 7 || 8 || 9) ?
**call an API and fetch data to fill the dropdown for that specific attribute id ** :
null
}
textField={data.tpodatka_id === (4 || 6 || 7 || 8 || 9) ? "name" : null}
dataItemKey={data.tpodatka_id === (4 || 6 || 7 || 8 || 9) ? "id" : null}
/>)}
so in the data section I must call an API with a attribut_id as a parameter so I can fetch dropdown values for that attribute and I don't know how to do it? There can be 1 or 5 or 15 of dropdown attributes, so the only thing I can think of is calling the API inside the map function and assigning values upon it's return.
Help anybody?
Best option is to extract the dropdown a separate react component & make the API call in it's useEffect. You can pass the id as a prop. Example (Codesandbox)
import React from "react";
import "./styles.css";
function YearDropDown(props) {
const [loading, setLoading] = React.useState(true);
const [items, setItems] = React.useState([]);
const [value, setValue] = React.useState("2013");
const { drilldowns } = props;
React.useEffect(() => {
let unmounted = false;
async function getCharacters() {
const response = await fetch(
`https://datausa.io/api/data?drilldowns=${drilldowns}&measures=Population`
);
const body = await response.json();
if (!unmounted) {
setItems(body.data.map(({ Year }) => ({ label: Year, value: Year })));
setLoading(false);
}
}
getCharacters();
return () => {
unmounted = true;
};
}, [drilldowns]);
return (
<select
disabled={loading}
value={value}
onChange={(e) => setValue(e.currentTarget.value)}
>
{items.map(({ label, value }) => (
<option key={value} value={value}>
{label}
</option>
))}
</select>
);
}
export default function App() {
return (
<div className="App">
<YearDropDown drilldowns="Nation" />
</div>
);
}