Component's dynamic content not rendering-CodePudding

I am making a small users list which takes in input of a user to append to the list. The list is supposed to display "No users" when the app is rendered for the first time and subsequently add the newly inputted users.

The component Users.js where the logic for conditional rendering is written, fails to render this dynamic content, resulting in neither "No users" nor the subsequent users list to be shown. I am unable to debug it, please help.

This is my App.js

import React, { useState } from 'react';
import Users from './Components/Users/Users';
import NewUser from './Components/NewUser/NewUser';


function App() {
  const [users, setUsers] = useState([]);
  // console.log(typeof(users));
  console.log(users);

  const addUser = (user)=>{
      setUsers((prevUsers)=>{
        return ([user,...prevUsers]);
      })
      
  }
  return (
    <div>
        <NewUser addUser={addUser}/>
        <Users usersList={users}/>
    </div>
  );
}

export default App;

This is NewUser.js which takes in new user data as input

import React, { useState } from "react";
import './NewUser.css'

const NewUser = (props)=>{

    const [name, setName] = useState('');
    const [userAge, setUserAge] = useState('');

    const nameChangeHandler = (event)=>{
        setName(event.target.value);
        
    }

    const ageChangeHandler = (event)=>{
        setUserAge(event.target.value);
    }

    const submitHandler = (event)=>{
        event.preventDefault();

        const user = {
            username: name,
            age:  userAge,
        }

        props.addUser(user);
        setName('');
        setUserAge('');

    }

    return (
            <form onSubmit={submitHandler}>
                <div>
                    <div className="inputs">
                        <label>Username</label>
                        <input type="text" value={name} onChange={nameChangeHandler}/>
                    </div>
                    <div>
                        <label>Age (Years)</label>
                        <input type="text" value={userAge} onChange={ageChangeHandler}/>
                    </div>
                </div>
                <div>
                    <button type="submit" >Add User</button>
                </div>
                
            </form>
 
    );
}

export default NewUser;

This is the Users.js component where the dynamic content isn't rendering.

import React from "react";
import UserDetail from './UserDetail';

const Users = (props) =>{
    console.log(props.usersList); 
    
    return (
        <div>
            {
                (props.userList?.length === 0) ?
                    <h2>No Users</h2>
                :<ul>
                    {props.userList?.map((userListUser)=>(
                        <UserDetail userData={userListUser}/>
                    ))}
                </ul>
            }
            
        </div>
    )
}

export default Users;

Finally this is the UserDetail.js component which displays the data for each user.

import React from "react";

const UserDetail = (props)=>{
    console.log(props.userData.username,props.userData.age);

    return (
        <div>
            <h2>{props.userData.username} ({props.userData.age} years old)</h2>
        </div>
    )
}

export default UserDetail;

CodePudding user response：

In your Users component you must use usersList and not userList. Here's what you need:

 return (
   <div>
     {props.usersList?.length === 0 ? (
       <h2>No Users</h2>
     ) : (
       <ul>
         {props.usersList?.map((userListUser) => (
           <UserDetail userData={userListUser} />
         ))}
       </ul>
     )}
   </div>
 );