I’m trying to pass and ID from 1 component to another. The first set of code is creating a div to display the album with parameters passed into is. this is where I’m picking up the ID from and passing it to my SongId function in PlayerContext.

import {SongId} from '../context/PlayerContext'

const SongItem = ({image,name,desc,id}) => {


  return (
          <div onClick={() => SongId(id)}  className='min-w-[180px] p-2 px-3 rounded cursor-pointer hover:bg-[#ffffff26] overflow-scroll'>
            <img className='rounded' src={image} alt="Album Image" />
            <p className='font-bold mt-2 mb-1'>{name}</p>
            <p className=' text-slate-200 text-sm mb-1'>{desc}</p>
          </div>
  )
}

export default SongItem;

The PlayerContext i’m using as a placeholder for the ID before passing it to my second component, The Console Log shows the ID is being picked up correctly regardless of the Div i click.

import React from 'react'
import Player from '../components/Player';

export const SongId = (id) =>  {console.log("PlayerContext " + id);
                                
                                return (<Player Id={id} /> )
                                };

Now my Issue is when I’m passing the id to the Player Component it does not pick it up. Can someone aid me if possible please.

const Player = (props) => {   
    
    const id = 0;

  if (props.Id === undefined) {
    console.log("true");
    let id = 0; 
  } 
  else {
    console.log(props.Id + " false");
    let id = props.Id;
    
  }

Tried googling different ways to pass data such as useStates and ContextProviders but keep running into a bunch of errors so gave up on that approach.decided to stick to this since i’m seeing the data in the console. so I believe I’m close. 🙂