Issue with conditionally rendering plyr-react media from json error-CodePudding

Trying to conditionally render different media (aud/vid) 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? Thanks in advance.

CodePudding user response：

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

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