[FIXED] How to create a className from dynamic properties in reactjs

Issue

Hi i have this myStyle object - but i have to apply class on h1 . How can i convert this myStyle into class.I tried this but its not working. its showing object when i inspect the elements.Height i am calculating dynamically based on the device height

class MyHeader extends React.Component {
deviceHeight=()=>document.height+"px";
  render() {
    const mystyle = {
      height: deviceHeight
      backgroundColor: "DodgerBlue",    };
    return (
      <div>
      <h1 className={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Solution

you can't do this if you want to apply dynamic css then you can do it like this way. Add below tag in your jsx before the class tag you are trying it will genrate dynamic css in your component code and you can apply it.

<style>
      {`\
    .mystyle{\
      height:${deviceHeight}px;\
      background-color:'red'\
    }\
  `}
    </style>

Answered By - Muhammad Irfan Mayo
Answer Checked By - - Clifford M. (ReactFix Volunteer)