Reactjs, Passing data(id) from one component to another in order to download a song

Question

Hi I am new to Reactjs and I'm practicing on a project of a music website. But there is an issue which I'm stuck with. Well there is a song page where I should show some songCards.

import React from 'react'
import SongCard from '../components/SongCard';
import { songsList } from '../components/songsList';

//this is first object of the songsList file which i hard coded instead of using api:

export const songsList =[
{
    id : 1,
    url : './components/Player/Songs/Homayoun Shajarian - Souvashoun.mp3',
    image : require('../assets/Souvashoun.jfif').default,
    name : 'x',
    singer : 'y',
    style :'z',
    lyrics :'v',
    source : './Palyer/Songs/Homayoun Shajarian - Souvashoun.mp3'


}];

export default function Songs() {
    return(
        
        

        

        

        
        );
}

and in the SongCard which I'll attach the code bellow, there is a button intended to route us to a downloadMusic page in order to download the specific song that it's button was clicked:

import React from 'react'
import {Card, Button} from 'react-bootstrap';
import styled from 'styled-components';
import {BrowserRouter as Router} from 'react-router-dom';

function SongCard(props){ 
    const id = this.props.id;
    this.props.history.push({
     pathname: '/downloadMusic',
    search: '?query=downloadMusic',
    state: { data: id }
    })

    return(
        
    
    
    
      
      
        آهنگ {props.name}
        خواننده {props.singer}
        
        
        
        
        
           
      
     
    
    
    
);
}
export default SongCard;

And finally this is the last page which is downloadMusic. Here also there should be a card containing information about the specific song and the final download button.

import React from 'react';
import { songsList } from './songsList';
import DownloadCard from './DownloadCard';
import AudioPlayer from './Player/AudioPlayer';

function DownloadMusic() {
    const id = this.props.location.state.data;
     const song = songsList.find(item => item.id === id);

    return(
        
        

        

        
        );
}

export default DownloadMusic;

What I want is to send the id and url of that specific song that was clicked in the Song page, to downloadMusic page and show it's information from songsList in a card. I've tried so many ways like using state, useParams(), ... but none of them worked for me. Also I don't want to send the whole props because I know it's not the best practice. So what am I doing wrong?

Hope I've shared enough information. any help is appreciated.

user_9339135 · Answer

what you have to do is map the array of songs, like this

import React from 'react'
import React from 'react'
import SongCard from '../components/SongCard';
import { songsList } from '../components/songsList';

//this is first object of the songsList file which i hard coded instead of using api:

const songsList =[
{
    id : 1,
    url : './components/Player/Songs/Homayoun Shajarian - Souvashoun.mp3',
    image : require('../assets/Souvashoun.jfif').default,
    name : 'x',
    singer : 'y',
    style :'z',
    lyrics :'v',
    source : './Palyer/Songs/Homayoun Shajarian - Souvashoun.mp3'


}];

export default function Songs() {


    
    return(
    
        
        {
           songsList.map((song, idx) => {

           return     
            })
        
        }    
        
        
        );
}

user_15107575 · Answer

You can create a function like this in the song card page

 const onSongCardClick = () => {
        history.push({
            pathname: '/downloadMusic',
              state: {id: this.props.id, url: this.props.url} 
          })
    }
...
...

And get those values in Download music page by

 const { id, url } = this.props.location.state

Also pass url as props to song card from songs page

user_16420661 · Answer

Alright I finally found a way to do this, after a long effort! I'm gonna share it here if someone needed.

So in the SongCard.js I used useHistory() and a navigate function to save the id and navigate to downloadMusic page also in the onClick attribute of button used navigate function:

import React from 'react'
import {Card, Button} from 'react-bootstrap';
import styled from 'styled-components';
import {BrowserRouter as Router, useHistory} from 'react-router-dom';



function SongCard(props){ 
    //navigating and saving id
    const history = useHistory()

    const navigate = (id) => {
        history.push(`/downloadMusic/${id}`)
    }

    return(
        
    
    
    
      
      
        آهنگ {props.name}
        خواننده {props.singer}
        
        
        //make sure you add onClick attribute!
        

      
     
    
    
    
);
}
export default SongCard;

Then in the DownloadMusic.js by using useRouteMatch() I accessed id param, this id was string so I converted it to number in the next step. At the end by using .find() method I found the specific song that was clicked for!

import React from 'react';
import { songsList } from './songsList';
import DownloadCard from './DownloadCard';
import AudioPlayer from './Player/AudioPlayer';
import { useRouteMatch } from "react-router-dom";


function DownloadMusic() {
    //getting id param
     const {
    params: { id },
  } = useRouteMatch('/downloadMusic/:id');
//converting the string id to number:
const num = Number(id);
//finding the song with song.id= num
 const song = songsList.find(item => item.id === num);



    return(
        
    

        

        
        );
}

export default DownloadMusic;

Just be careful about type of id, it must be number. this little one took me a long time. :) Good luck!

Reactjs, Passing data(id) from one component to another in order to download a song

3 Answers