How can I pass React props in audio player?-CodePudding

I created a component for an audio player and I'm trying make the src editable in different files <audio controls src={sourceFile}/>. I tried to use react props but it isn't working how can I fix this?

I am using Next.js

Component file:

    const AudioPlayer = (sourceFile) => {
      return (
     <div>
        <audio preload="metadata" controls src={sourceFile} />
      </div>
      );
    };
    
    export default AudioPlayer;

index.js

<AudioPlayer sourceFile="audio.mp3" />

CodePudding user response：

You need to change your const function parameter so it knows its looking for props

const AudioPlayer = ({sourceFile}) => {...