ReactJS: already declared in the upper scope

You should be able to simplify this so that you're not calling setListRealm multiple times: setListItems(lstR => [. lstR, . resp.data.map(res => (< value: res.id, label: res.name>))]) , as a side note .map() for iteration only is not what map should be used for, instead .forEach() can be used

2 Answers 2

The name you use in the setListRealm callback can be anything you want, so you can just make it previousListRealm or just previous or something:

setListRealm(previousListRealm => [. previousListRealm, < value: res.id, label: res.name>]); 

It doesn't have to match the name of the constant you've put the value from useState in.

A few other suggestions:

1. As Nick pointed out, you'd be better off doing your map first, and then adding all the elements to state at the same time. (And separately, please see my post Misusing map — map isn't the right tool if you're not using the array it returns.)
2. Your findList is an async function. In general, it's best to avoid mising async / await with explicit promise methods like then . Just use await without using then .
3. The code calling findList needs to handle the fact it may reject its promise.
4. There's no need to re-create the findList function on every render if you only use it on the first render.
5. There's no point to the template literal in axios.get(`$`) , just use axios.get(apiUrl) .

useEffect(() => < const findList = async () => < const < data >= await axios.get(apiUrl); const additions = data.map((< id, name >) => (< value: id, label: name >)); setListRealm((previous) => [. previous, . additions]); >; findList() .catch((error) => < // . handle.report error. >); >, []); 

Or don't use an extra function at all:

useEffect(() => < axios.get(apiUrl) .then(() => < const additions = data.map((< id, name >) => (< value: id, label: name >)); setListRealm((previous) => [. previous, . additions]); >) .catch((error) => < // . handle.report error. >); >, []);