Soy extremadamente nuevo en ReactJS y no tengo idea de lo que estoy haciendo mal, pero mi lista de ciudades siempre aparece sin definir. La lista de números funciona bien. He estado luchando contra esto durante las últimas 3 horas y estoy perplejo.
¿Podría alguien ayudarme?
Usé la aplicación create-react y eliminé React.StrictMode del archivo index.js. Todo lo que estoy haciendo está en 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;Tiene corchetes, lo que significa que esta es una función y necesita devolver algo. por ejemplo return <li ... . Lo más probable es que pretendiera que los corchetes fueran paréntesis.
let cityList = cities.map((item, index) =>{ <li key={index}>{item}</li> });Quieres uno de estos:
let cityList = cities.map((item, index) =>{ return <li key={index}>{item}</li> }); let cityList = cities.map((item, index) => ( <li key={index}>{item}</li> ));