Buenas estoy realizando una simple app con ReactJS donde se ingresa un nombre de usuario y una edad y luego se renderiza en una lista. Mi inconveniente es que se me renderiza solo el mensaje cuando me tendria que renderizar mi data que le paso concatenada con el mensaje.
Paso a mostrar mi codigo:
App.js
import React, {useState} from 'react';
import AddUser from './components/Users/AddUser';
import UsersList from './components/Users/UsersList';
function App() {
const [usersList, setUsersList] = useState([]);
const addUserHandler = (userName, userAge) =>{
setUsersList((prevUsersList) => {
return [
...prevUsersList,
{name:userName, age:userAge, id: Math.random().toString()}
]; ///Crear un nuevo objeto por cada nuevo usuario y se lo adjunto al array que ya esta creado (prevUsersList)
});
}
return (
<div>
<AddUser onAddUser ={addUserHandler}/>
<UsersList users={usersList}/>
</div>
);
}
export default App;
En addUserHandler le paso un nombre y una edad como parametros. Luego al set le paso un array donde luego le paso a es mismo array un objeto que contiene un usuario una edad y un id. Esta funcion se la paso al prop cuando llama al componente AddUser.
AddUser.js:
import React, {useState} from 'react';
import Card from '../UI/Card';
import classes from './AddUser.module.css';
import Button from '../UI/Button';
const AddUser = (props) =>{
const [user, setUser] = useState('');
const [age, setAge] = useState('');
const addUserHandler = (event) =>{
event.preventDefault();
if(user.trim().length === 0 || age.trim().length === 0){
return;
}
if(+age < 1){
return;
}
props.onAddUser(); ///Llamo al prop de AddUser component en App.js
setUser('');
setAge('');
}
const userChangeHandler = event =>{
setUser(event.target.value);
}
const AgeChangeHandler = event =>{
setAge(event.target.value);
}
return(
<Card className={classes.input}>
<form onSubmit={addUserHandler}>
<label htmlFor="username">Username</label>
<input
id="username"
type="text"
value={user}
onChange={userChangeHandler}/>
<label htmlFor="age">Age</label>
<input
id="age"
type="number"
value={age}
onChange={AgeChangeHandler}/>
<Button type="submit">Add User</Button>
</form>
</Card>
);
}
export default AddUser;
En este componente tengo unas validaciones para que no se ingrese nada vacío ni una edad menor a 1 y poder resetear los campos cuando se hace un submit del formulario.
UsersList.js:
import React from 'react';
import classes from './UsersList.module.css';
import Card from '../UI/Card';
const UsersList = (props) =>{
return (
<Card className={classes.users}>
<ul>
{props.users.map((user) => (
<li key={user.id}>
{user.name} ({user.age} Years Old)
</li>
))}
</ul>
</Card>
);
}
export default UsersList;
Este ultimo componente simplemente recorre el array de usuarios y por cada usuario renderiza la informacion en una lista.
Por ejemplo si yo en el formulario pongo de nombre: "Pablo" edad: "23" me tendria que renderizar Pablo (23 Years Old) segun la siguiente linea de código.
{props.users.map((user) => (
<li key={user.id}>
{user.name} ({user.age} Years Old)
</li>
))}
Pero me esta renderizando nomas ( Years Old) y en la consola no me muestra ningún objeto ni array.
addUserHandler
deAddUser.js
no deApp.js