title: Dynamic import files with React
body: <p>I am creating an animations using Adobe After Effects and React Lottie and I have many json files generated by Bodymovin extension. I am importing files in that way:</p>
  
  <pre><code>import * as initial from './white_bird.json';
  import * as hoverOn from './white_bird_hover_on.json';
  import * as hoverOff from './white_bird_hover_off.json';
  </code></pre>
  
  <p>But, when I have e.g. 6 other components that look identically but differ from each other only with imported files. How can I write those lines upper in something like this:</p>
  
  <pre><code>const data = {
      initial: import * as initial(`./${some_param}.json`),
    };
  </code></pre>
  
  <p><strong>Note that I must import it like '* as' in another way this doesn't work</strong></p>