0

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.

2
  • llamas al addUserHandler de AddUser.js no de App.js
    – Bryro
    Commented el 27 abr. 2022 a las 21:24
  • Como puedo hacer para especificar que es el de App.js? @Bryro
    – MateoG98
    Commented el 28 abr. 2022 a las 0:06

1 respuesta 1

0

Cuando le paso el prop onAddUser a mi componente AddUser.js tengo que pasarle el user y age del array con el estado actual. Entonces en vez de:

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('');
    }

Tiene que ser:

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(user, age); ///Llamo al prop de AddUser component en App.js
        setUser('');
        setAge('');
    }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.