I have my object `videoId` that has these values:

[![enter image description here](https://i.stack.imgur.com/eHVIT.png)](https://i.stack.imgur.com/eHVIT.png)

I would like to render multiple `Player` components based on number of keys in the object, in this case that would be 2 `Player` components. Also each `Player` component should have different `src` attribute value. This value is represented in object as the `file` attribute.

So far I have tried to use `map()` function and I managed to get the `file` attribute from every key, but I have no idea how can I generate the `Player` components. Here is my code:

```
const response = await dataProvider(GET_MANY, 'vid', { ids: videoId })
const file = response.data;

let formsPerFile = file.map(async f => {
   var sigkey = "key";
   var formBody = new FormData();
   formBody.set('ver', "1.2");
   formBody.set('key', "key");
   formBody.set('video_id', f.file);
   formBody.set('user_id', "1234");
   formBody.set('format', "json");
   formBody.set('ip', "");
   formBody.set('tts', "0");
   formBody.set('nonce', Math.round((new Date()).getTime() / 1000));

   var sign_fields = [formBody.get('video_id'), formBody.get('user_id'), formBody.get('ip'), formBody.get('tts'), formBody.get('ver'), formBody.get('key'), formBody.get('nonce')];
   var data = sign_fields.join(':');
   var signature = hmacsha256(data, sigkey);

   formBody.set('sig', signature);

   var formBodyStringified = new URLSearchParams(formBody).toString();

   const resJson = await fetch(Config.api.livebox, {
         method: 'POST',
         body: formBodyStringified,
         headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
         }
         }).then(res => res.json());
                return 'https:' + resJson.hls;
 });
 this.setState({ multipleVideoSource: formsPerFile });

```

This code stores into state each `file` attribute.

And then in my `render()` method:

```
render()
    {
        const { multipleVideoSource }  = this.state;
        return multipleVideoSource ? <Player key={multipleVideoSource} height={500} fluid={false}>
            <ControlBar autoHide={false} className="my-class" />
            <BigPlayButton position="center"/>
            <HLSSource isVideoChild src={multipleVideoSource} />
        </Player> : "No video";
    }

```

Any ideas how can I render multiple `Player` components?

Thank you in advance.