Issue with conditionally rendering plyr-react media from json error

Question

Trying to conditionally render different media (audio/video) from a JSON file in react but getting errors.

Here is the code:

   {surgeryData.map(data => (
      <div>
         <Plyr
            source={
               ((type = {data.type}),
               (sources = [
                  {
                     src = {data.media}
                  }
               ]))
            }
         />
      </div>
   ))}

Whether I use = after source or : react doesn't seem to like the nested data inside the source. Any solutions?

Answer 1

Per the documentation, source should be an object like this.

{surgeryData.map((data) => (
  <div>        
    <Plyr
      source={{
        type: data.type,
        sources: [
          {
            src: data.media
          }
        ]
      }}
    />
  </div>
 ))}