how to add variable in jsx style attribute when there is already object?-CodePudding

I am trying to do text-align in textarea tag by writing logic with the variable name myStyle, so the logic is working but then when I made a toggle switch for dark mode and added more styling as object. Then myStyle stop working. So the question is how to add myStyle variable in style attribute when there is already a given object what is the correct format?


export default function TextForm(prop) {
  const [text, setText] = useState("Enter text here");

  const [myStyle, setMyStyle] = useState({
    textAlign:'left'
  })
  const textAlign = ()=>{
    if(myStyle.textAlign === 'left'){
      setMyStyle({
        textAlign: 'center'
      })
    }
    else if(myStyle.textAlign === 'center'){
      setMyStyle({
        textAlign:'right'
      })
    }
    else{
      setMyStyle({
        textAlign:'left'
      })
    }
  }

  return (
    <>
    <div className='container' style={{color: prop.mode==='light'?'Black':'white'}}>
        <h2>{prop.heading} </h2>
        <div className="mb-3">
        <textarea className="form-control " style={myStyle,{ backgroundColor:prop.mode==='light'?'white':'grey', color:prop.mode==='light'?'black':'white'}} value={text}  onChange= {handleOnChange}  id="myBox" rows="6"></textarea>
        </div>
        <button className="btn btn-primary mx-1" onClick={textAlign} >Change Text Align</button>
    </div>
    </>
  )
}

CodePudding user response：

Spread the existing object into a new one, and in that new one, list the additional properties desired.

<textarea
  className="form-control "
  style={{
    ...myStyle,
    backgroundColor:prop.mode === 'light' ? 'white' : 'grey',
    color: prop.mode === 'light' ? 'black' : 'white'
  }}
  value={text}
  onChange={handleOnChange}
  id="myBox"
  rows="6"
></textarea>

Though it'd be more elegant to toggle a CSS class on the element instead, and do this with CSS rules instead of through properties set via JS.