Рендеринг нескольких элементов на основе количества ключей в объекте

Question

У меня есть мой объект videoId, который имеет следующие значения:

Я хотел бы отобразить несколько Player компонентов на основе количестваключи в объекте, в этом случае это будет 2 Player компонентов. Также каждый компонент Player должен иметь различное значение атрибута src. Это значение представлено в объекте как атрибут file.

До сих пор я пытался использовать функцию map(), и мне удалось получить атрибут file от каждого ключа, но я понятия не имею, какможно сгенерировать Player компоненты. Вот мой код:

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 });

Этот код сохраняет в состояние каждый атрибут file.

А затем в моем методе render():

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";
    }

Любойидеи, как я могу сделать несколько Player компонентов?

Спасибо заранее.

Answer 1

Перебирайте ключи объекта и передавайте каждый объект videoId в качестве опоры компоненту Player.

Object.keys(multipleVideoSource).map((key) => (
    <Player key={key} src={multipleVideoSource[key]} />
));

Answer 2

Понятия не имею, как сгенерировать компоненты проигрывателя

Использовать карту для просмотра списка multipleVideoSource.

{
  multipleVideoSource.map(src => (
    <Player key={src} src={src} />
  ))
}