How can I display the button only once?-CodePudding

I'm passing all the user's data to the card component, but I want to remove the card when I click the button, without rendering the button more than one time. Is it possible to achieve that?

The cards are stacked on top of each other.

Thanks in advance!

This is where I'm getting the data and controlling the button click

const [user, setUser] = React.useState(null)
const [selectedUser, setSlectedUser] = React.useState(0)


const getUsers = async () => {
  try{
    const response = await axios.get('http://localhost:8000/users')
    setUser(response.data)
    console.log(response.data)
  } 
  catch(err){
    console.log(err)
  }
}

useEffect(()=>{
  getUsers()
}, [])

const handleCardClick = (userId) => {
    setSlectedUser(userId)
}

const handleRemove = () => {
    setUser(user.filter((user)=> user.userId !== selectedUser))
}

And this is where I'm rendering it.

<div>
      {user && user.map(user => (
         <div>
           <Card
             country={user.country}
             name={user.name}
             about={user.about}
             photo={user.photo}
             onClick={() => handleCardClick(user.userId)}/>
          </div>
              ))}
          <button className='btn-cards text-center' onClick={handleRemove}>DELETE</button>
</div>

This is the card component

import React from 'react'

const Card = ({name, about, photo, country}) => {


  return (
    //create a card to display the user's profile
    <div className='bg-white rounded-3xl shadow-lg p-6 mb-4 card'>
        <div className='flex flex-row justify-between'>
            <div className='flex flex-col'>
                <img className='rounded-2xl w-96 h-96 object-cover' src={photo} alt="" />
                <h1 className='text-2xl'>{name}</h1>
                <h1 className='text-xl'>{country}</h1>
                <h2 className='text-xl'>{about}</h2>
            </div>
        </div>
    </div>

  )
}

export default Card

CodePudding user response：

The state:

// In this stae var you will save the selected user ID
const [selectedUser, setSlectedUser] = useState(0)

The handlers:

const handleCardClick = (userId) => {
    setSlectedUser(userId)
}

const handleRemove = () => {
    setUser(user.filter((user)=> user.userId !== selectedUser))
}

The card item inside the list:

<Card
    country={user.country}
    name={user.name}
    about={user.about}
    photo={user.photo}
    onClick={() => handleCardClick(user.userId)}/>

The button, in whatever place you like:

<button className='btn-cards text-center' onClick={handleRemove}>DELETE</button>

By the way your root 'div' in the list needs a key, I suggest to use the user's id: <div key={user.userId}>

Card component receiving the onClick method as a props:

const Card = ({name, about, photo, country, onClick}) => {


  return (
    //create a card to display the user's profile
    <div className='bg-white rounded-3xl shadow-lg p-6 mb-4 card' onClick={onClick}>
        <div className='flex flex-row justify-between'>
            <div className='flex flex-col'>
                <img className='rounded-2xl w-96 h-96 object-cover' src={photo} alt="" />
                <h1 className='text-2xl'>{name}</h1>
                <h1 className='text-xl'>{country}</h1>
                <h2 className='text-xl'>{about}</h2>
            </div>
        </div>
    </div>

  )
}