change position landscape or portrait in react

Question

i have a landscape and portrait image. how can i pop up it correctly ?

my pop up:

 <Modal
      visible={this.state.visible}
      width="600"
      height="400"
      effect="fadeInUp"
      onClickAway={() => this.closeModal()}
    >
      <div>
        <img
          src={"/img/" + this.state.LinkName}
          width="600"
          height="400"
          alt="Houston We have pb"
        />

my idea, i will add "land" and "portrait" string to each image. so i can test this.state.LinkName.contains("Land") then

width = 600 and height = 400 


else width = 400 and height = 600

how can i do that in react ?

i am newbie in react technologie.

i modifie the code :

 handleButtonClick = (e, row) => { 
    var bild = new Image();
    bild.src = "/img/" + row.original.Cert;
    //Image.getSize(bild.src, (width, height) => {this.setState({width, height})}); 
    //const {width, height} = Image.resolveAssetSource(bild.src);
    var Pos
    bild.onload = function()
    {
      Pos = bild.width > bild.height ? "Land" : "Port";        
    }  
    this.setState({ visible: true, LinkName: row.original.Cert, ThePos: Pos });   
  };

Now i get the real width and height.

the problem now, the variable ThePos is always undifined.

first get image height and width then store into state, and update modal and image height and width using same property after all set vissible true — Man, Nov 25 '19 at 13:34
handleButtonClick = (e, row) => { var bild = new Image(); bild.src = "/img/" + row.original.Cert; //Image.getSize(bild.src, (width, height) => {this.setState({width, height})}); //const {width, height} = Image.resolveAssetSource(bild.src); var Pos = bild.width > bild.height ? "Land" : "Port"; this.setState({ visible: true, LinkName: row.original.Cert, ThePos: Pos, TheSource:bild.src.height }); }; the problem is bild.width and height always 0 — user609511, Nov 25 '19 at 15:58
if height and width always zero then how will you decide Modal will be **( land || Port )** — Man, Nov 26 '19 at 02:36
then first get height and width correctly without height and width , you cant do nothing — Man, Nov 26 '19 at 08:20

score 1 · Answer 1 · answered Nov 25 '19 at 13:34

You can just test on this.state.LinkName.contains("Land")

like this:

 render(){
      return(
     <Modal
          visible={this.state.visible}
          width={this.state.LinkName.contains("Land")? "600" : "400"}
          height={this.state.LinkName.contains("Land")? "400" : "600"}
          effect="fadeInUp"
          onClickAway={() => this.closeModal()}
        >
          <div>
            <img
              src={"/img/" + this.state.LinkName}
              width={this.state.LinkName.contains("Land")? "600" : "400"}
              height={this.state.LinkName.contains("Land")? "400" : "600"}
              alt="Houston We have pb"
            />
     </Modal>
    )
    }

score 0 · Answer 2 · answered Nov 26 '19 at 14:11

i found it:

  handleButtonClick = (e, row) => { 
var bild = new Image();
bild.src = "/img/" + row.original.Cert;   
bild.onload = () =>   
this.setState({ visible: true, LinkName: row.original.Cert, ThePos: bild.width > bild.height ? "Land" : "Port" });

};

change position landscape or portrait in react

2 Answers2