0

I'm trying to pass an iframe tag inside my JSX that is returned from the component. The allow="..." seems to work as a string, but style="...." gives a JSX error, expecting a mapping, not a string.

return(
  <Rnd
  style={style.casualGameContainer}
  default={{
    x: 10,
    y: 10,
    width: 810,
    height: 610,
    zIndex: 21,
  }}
  >
    <iframe id="iframe" title={gameInfo.name} name={gameInfo.name} src={gameInfo.url}
     allow="display-capture;camera;microphone;fullscreen;payment;"
     referrerpolicy="" frameborder="0" width="100%" height="100%"
     style={{zIndex:'21', border:'1px,solid,white'}}>
    </iframe>
  </Rnd>
  );

const style = StyleSheet.create({
   casualGameContainer: {
    width: '100%',
    height: '74.12%',
    flexDirection: 'row',
    zIndex: '200',
  },

The above passes the zIndex (converting it to z-index: 21) but does not pass the border. And the z-index has no effect in the iframe. (and the z-index isn't passed to the Rnd element either.

EDIT: It turns out Rnd cannot accept a stylesheet. I had to change to an object:

const style = {
    width: '100%',
    height: '74.12%',
    flexDirection: 'row',
    zIndex: '21',
};
TylerH
  • 20,799
  • 66
  • 75
  • 101
gwhiz
  • 135
  • 9

1 Answers1

1

The issue here is actually just that the syntax you've provided for the border isn't valid CSS

If you were doing this in plain CSS, you wouldn't write

.some-element {
  border: 1px,solid,white;
}

you would write

.some-element {
  border: 1px solid white;
}

So, you should change your style property to:

style={{zIndex: '21', border: '1px solid white'}}
JMA
  • 334
  • 1
  • 9
  • Yes that fixed the border thank you! I'm still confused why the iframe JSX is different from other tags. e.g. . For example, it won't accept a list of object (with commas) we have to use spaces even between the attributes. – gwhiz Sep 26 '22 at 14:35