A prop is not accessible inside the child component even after passing it in the parent component

I am passing a prop from the parent component, but inside the child component, the prop is not accessible. Please see the return statement of the parent component where I have passed the card as a prop.

import {useState } from 'react';

// importing styles
import './styles/Card.css'


// importing components
import Card from './components/Card'

const images = [
  {"src": "/img/clock.jpg"},
  {"src": "/img/dome.jpg"},
  {"src": "/img/fcse.jpg"},
  {"src": "/img/gate.jpg"},
  {"src": "/img/lib.jpg"},
  {"src": "/img/tuck.jpg"},
]

function App() {
const [card, setCard ] = useState([])
const[turn, setTurn ] = useState(0)
const [choiceOne, setChoiceOne] = useState(null)
const [choiceTwo, setChoiceTwo ] = useState(null)



  const shuffle = () =>{
    const shuffledCards = [...images, ...images]
      .sort(()=>{
        return (Math.random() - 0.5)
      })
      .map((card ) => ({...card, id: Math.random()}))

      setCard(shuffledCards)
      setTurn(0)
  }

  console.log(card, turn)


  const handleChoice = (card)=>{
    console.log(card)
  }



  return (
    <div className="App">
      {/* navbar */}
      <div className="nav">
          <h1 className="title">Memory Game!</h1>
          <button className="btn" onClick={shuffle}>Reset Game</button>
      </div>


      {/* card grid */}
      <div className="card-grid">

        {card.map((card)=>{

            return(
              
                  <Card
                    handleChoice = {handleChoice}
                    card={card}
                    key={card.id}
                    source = {card.src}
                    cover = {"../img/logo.png"}
                  />
              
            )
        })}



      </div>
      

    </div>
  );
}

export default App;

The Child Component:

Inside the child component, I am trying to access the card prop but it says that the card (the prop) is declared but its value is never read.

import '../styles/Card.css'


const Card = ({source, card, cover, handleChoice}) => {
    
    const handleClick = ( card ) => {
        handleChoice(card)
    }

    return ( 
        <div className="card">
            
                <img className='front' src={source}/>
                <img className='back' onClick={handleClick} src={cover}/>
            
        </div>
     );
}

 
export default Card;

Screenshot:

I destructured the prop inside the child component, but its still not accessible. In the screenshot, one can see that the card is greyed out which indicates that it has not been used.

>Solution :

I’m guessing you are refering to Line:7 in the screenshot where you have used card which you expect to be populated with the destructed card value. You have defined card variable in Line6 as function param, hence that variable will be picked up instead of props. Changing function param of handleClick to a different variable such as event should do the trick.