How to generate path to imported file in React dynamically

Question

I have a problem with generated dynamic path to import file in React. I used map() function for generated dynamic part of code, which is a sequence of the same few div elements with an audio element inside this div. This code looks like this:

    {soundsName.map((sound, i) => {
          return (
            <div
              className="drum-pad"
              onClick={this.soundPlay}
              title={"Sound " + sound}
              key={i}
            >
              <audio className="clip" id={sound}>
                <source src={`s${i}`} type="audio/mpeg"></source>
              </audio>
              {sound}
            </div>
          );
        })}

My problem is that the generated path in 'src' for 'source' element is wrong. The path is only the name of imported file, like 's1', 's2', 's3' and so on.

Files are imported like this:

    import s0 from "./assets/sounds/s1.mp3";
    import s1 from "./assets/sounds/s2.mp3";
    import s2 from "./assets/sounds/s3.mp3";
    import s3 from "./assets/sounds/s4.mp3";
    import s4 from "./assets/sounds/s5.mp3";
    import s5 from "./assets/sounds/s6.mp3";
    import s6 from "./assets/sounds/s7.mp3";
    import s7 from "./assets/sounds/s8.mp3";
    import s8 from "./assets/sounds/s9.mp3";

I really don't know, what I am doing wrong :( Maybe some of you know that?

Thanks for any help.

can you explain your problem that you are facing and your requirement — akhtarvahid
– akhtarvahid, Commented Nov 14, 2019 at 9:12
Now, when my code is generated, I have something like this in the path to link in src code: <source src="s1">, and this is wrong. I need to have a path to file in this place, not the name of imported file. So, my code for dynamically create this path in map() function is wrong. I don't know what is wrong in this code and how it must be changed. — Iwona Hajczewska
– Iwona Hajczewska, Commented Nov 14, 2019 at 9:19
Why are you trying to use an import statement to retrieve the files? Instead you could output the path to the src attribute directly as follows: src={`./assets/sounds/s${i}.mp3`} — FunkeyFlo
– FunkeyFlo, Commented Nov 14, 2019 at 9:31

TeaNyan · Accepted Answer · 2019-11-14 10:03:23Z

2

You should put the source as ./assets/sounds/s${i}.mp3 instead of s${i} and you will get the following src="./assets/sounds/s1.mp3"

EDIT for your specific case:

Put all the components into an array for example:

let soundPaths = [s1, s2, s3, s4 /*... and rest of components */]

Then in your map() function do

 <source src={soundPaths[i]} type="audio/mpeg"></source>

edited Nov 14, 2019 at 10:03

answered Nov 14, 2019 at 9:22

TeaNyan

5,0895 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Iwona Hajczewska Over a year ago

Thanks for help, but when I puted code like you wrote in my code: <source src="/assets/sounds/s${1}.mp3" type="audio/mpeg"></source>, after render this code looks the same - nothing changed. The path is not generated dynamically.

TeaNyan Over a year ago

No no, put it with template literal and don't put ${1} but ${i}. And you forgot a dot.

Iwona Hajczewska Over a year ago

I changed one thing - I used backticks and code is working :)

Iwona Hajczewska Over a year ago

My code for path now looks like this: src={./assets/sounds/s${i}.mp3}

Iwona Hajczewska Over a year ago

Yes, this is working :) Thank you so much for your help!

|

kiran kumar · Accepted Answer · 2019-11-14 09:33:25Z

0

import s0 from "./assets/sounds/s1.mp3";
import s1 from "./assets/sounds/s2.mp3";
import s2 from "./assets/sounds/s3.mp3";
import s3 from "./assets/sounds/s4.mp3";
import s4 from "./assets/sounds/s5.mp3";
import s5 from "./assets/sounds/s6.mp3";
import s6 from "./assets/sounds/s7.mp3";
import s7 from "./assets/sounds/s8.mp3";
import s8 from "./assets/sounds/s9.mp3";

sound=[
    {
       sound_name:"s1"
       path:s1
    },
    {
       sound_name:"s2"
       path:s2
    },    {
       sound_name:"s3"
       path:s3
    },    {
       sound_name:"s4"
       path:s4
    },    {
       sound_name:"s5"
       path:s5
    },    {
       sound_name:"s6"
       path:s6
    },    {
       sound_name:"s7"
       path:s7
    },    {
       sound_name:"s8"
       path:s8
    },
]

this is a way


   {soundsName.map((sound, i) => {
          return (
            <div
              className="drum-pad"
              onClick={this.soundPlay}
              title={"Sound " + sound.sound_name}
              key={i}
            >
              <audio className="clip" id={sound.sound_name}>
                <source src=sound.path type="audio/mpeg"></source>
              </audio>
              {sound.sound_name}
            </div>
          );
        })}

answered Nov 14, 2019 at 9:33

kiran kumar

1104 bronze badges

1 Comment

Iwona Hajczewska Over a year ago

Thank you so much for your solution, but when I used this I have this error: Error: Objects are not valid as a React child (found: object with keys {sound_name, path}). If you meant to render a collection of children, use an array instead.

Collectives™ on Stack Overflow

How to generate path to imported file in React dynamically

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related