button onClick works only once in react component-CodePudding

I am fetching data from API and Im displaying the users name in a parent component UserList and when I click on one name, it displays the child component called UserDetails. component).

The UserDetail comp contains a button that on click hides that component so the user can go and click on another user's name and see their details. It works fine the first time I choose a user and close the window. But when I click again on a second user nothing happens. I need to refresh the page so it works fine again.

I don't understand where the issue is. I suspect something to do with the ternary operator around the UserDetails component? Or something with the state? is it ok I write false instead of null?

The parent component:

const UserList = () => {
     
      const [users, setUsers] = useState([])
      const [selectedUser, setSelectedUser] = useState()
      const [showUser, setShowUser] = useState(true)
      
      const onHandleClick = () => setShowUser(false)
      
      useEffect(() => {
        fetch(URL)
          .then(res => res.json())
          .then(json => setUsers(json));
      }, [])
    
      return (
        <>
          <header>      
            <h1>Users list</h1>
          </header>
          <section> 
            <ul>
              {users.map(user => (
                <li key={user.id}>
                  <button onClick ={() => setSelectedUser(user)}>{user.name}</button></li>
              ))}         
            </ul>
    
            {selectedUser && (
              <>
                {showUser ?
                <UserDetail 
                  name={selectedUser.name} 
                  username={selectedUser.username}
                  email={selectedUser.email}
                  address={selectedUser.address.street}
                  phone={selectedUser.phone}
                  company={selectedUser.company.name}
                  onClick={onHandleClick}
                />
                : false}           
              </>
            )}
              
          </section>
        </>
      )
    }
    
    export default UserList

The child component:

const UserDetail = ({name, username, email, address, phone, website, company, onClick}) => {
 
  return (
    <>
      <DetailWindow>
        <h1>{name}</h1>
        <p>{username}</p>
        <p>{email}</p>
        <p>Adress:{address}</p>
        <p>{phone}</p>      
        <p>{website}</p>      
        <p>{company}</p>       
        <button onClick={onClick}>X</button>
      </DetailWindow>
    </>
  )}
  
const DetailWindow = styled.div`
  border: black solid 1px;
`

export default UserDetail

CodePudding user response：

After you set showUser to false, you never set it back to true again. I would suggest your onClick when you're mapping over users to both select the user and show the user -

onClick={() => {setSelectedUser(user); setShowUser(true);} }

It would probably make sense to declare this function outside of your return since it will be multi-line.