CODEWITHSUNDEEP
javascriptreactjs
Ayush Singh
Ayush Singh

Reputation: 57

Error While passing a state as a props to the Components

This is my first react app I'm creating an Music player using Create react app, I want to pass my state "Albums.js" as props in Details Component (Like, for src and image), so it can change it cover image and song according to the Album.js , but its Gives me error (Type Error: Cannot read property 'img' of undefined ) here is the code :

App.js

import React from 'react';
import Details from '../Components/Details'
import {Albums} from '../Albums';
import './App.css'
import 'tachyons';

 
class App extends React. Component{
constructor(){
  super()
  this. State={
    Albums: Albums
  }
}



  render(){
    return(
      <div className='tc center'>
        <div className=' tc bg-light-green  dib br3 pa3 ma2  shadow-5'>
          <h4>Now Playing </h4>
          <Details src={Albums[0].src} img={Albums[0].cover}/>
         <p>Next : <span>Next song Name</span></p>
        </div>
      </div>
      );

  }
}



export default App;

Details.js

import React from 'react';
import { BsSkipBackwardFill } from "react-icons/bs";
import { BsPlayFill } from "react-icons/bs";
import { BsSkipForwardFill } from "react-icons/bs"; 



const Details=({props})=>{
   return(
       <div className='Detailss'>
       <img className='img-src' alt='pic' src={`${props.img}`}/>
       <h3>Song name</h3>
       <h5>Artist Name</h5>
       <button className='prev-btn'> 
       <BsSkipBackwardFill size="3rem"/>   
       </button>
       <button className='pause-btn'> 
       <BsPlayFill size="3rem"/>
       </button>
       <button className='next-btn'> 
       <BsSkipForwardFill size="3rem"/>
       </button>
        <audio className='controls' src={props.src} controls></audio>
       </div>
       );
} 


export default Details;

Album.js

export const Albums = [
 {
   cover: 'perfect-img.jpg',
   Songname: 'Leanne Graham',
   Artistame: 'Bret',
   src: './Songs/Ed-Sheeran-Perfect.mp3'
 },
 {
   cover: 10,
   Songname: 'Clementina DuBuque',
   Artistame: 'Moriah.Stanton',
   src: '[email protected]'
 },
   {
   cover: 1,
   Songname: 'Leanne Graham',
   Artistame: 'Bret',
   src: '[email protected]'
 },
   {
   cover: 1,
   Songname: 'Leanne Graham',
   Artistame: 'Bret',
   src: '[email protected]'
 }
];

Upvotes: 0

Views: 27

Answers (2)

Dandelion
Dandelion

Reputation: 195

in details.js you don't need to wrap the props input in curly brackets.

Try it like this:

const Details=(props)=>{
 return(
 etc...

Upvotes: 1

Priyank Kachhela
Priyank Kachhela

Reputation: 2635

You are wrongly extracting props inside Details component.

Try to extract like below:-

const Details=({img, src})=>{
  return (
    <div className="Detailss">
      <img className="img-src" alt="pic" src={`${img}`} />
      <h3>Song name</h3>
      <h5>Artist Name</h5>
      <button className="prev-btn">
        <BsSkipBackwardFill size="3rem" />
      </button>
      <button className="pause-btn">
        <BsPlayFill size="3rem" />
      </button>
      <button className="next-btn">
        <BsSkipForwardFill size="3rem" />
      </button>
      <audio className="controls" src={src} controls />
    </div>
  );
}

Upvotes: 1

Related Questions