I'm extremely new to ReactJS and I have no idea what I am doing wrong but my City list always comes back undefined. The number list renders just fine. I have been fighting this for the past 3 hours and I am just stumped.
Could someone please help me out?
I used the create-react-app and I have removed the React.StrictMode from the index.js file. Everything I am doing is in the App.js.
import logo from './logo.svg';
import './App.css';
import React from 'react';
console.clear();
//Simple List of numbers
let numbers = [1, 2, 3, 4, 5];
let numberList = numbers.map((number) =>
<li key={number}>{number}</li>
);
//we would pull something from a db and pass it to the function
let cities = ['Boise', 'Nampa', 'Meridian', 'Caldwell'];
let Cities = (arrayList) => {
let cities = arrayList.cities;
console.log(cities);
let cityList = cities.map((item, index) =>{
<li key={index}>{item}</li>
});
console.log(cityList);
return(
<ul>{cityList}</ul>
);
/*
return(
<ul>
{
//You cannot use a forEach it will always return undefined. ReactJS needs a key so we can use the index of the item
cities.map((item, index) =>{
<li key={index}>{item}</li>
})
}
</ul>
);
*/
};
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>It is {new Date().toLocaleTimeString()}</h2>
<div>
<h2>Numbers</h2>
<ul>{numberList}</ul>
</div>
<div>
<h2>Cities</h2>
<Cities cities={cities}/>
</div>
</header>
</div>
);
}
export default App;You have curly brackets, which means this is a function and you need to return something. e.g. return <li .... More likely, you intended the curly brackets to be parentheses.
let cityList = cities.map((item, index) =>{
<li key={index}>{item}</li>
});
You want one of these:
let cityList = cities.map((item, index) =>{
return <li key={index}>{item}</li>
});
let cityList = cities.map((item, index) => (
<li key={index}>{item}</li>
));