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

Question

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>
    </>
  )
}

CertainPerformance · Accepted Answer · 2022-05-31 04:56:06Z

1

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.

answered May 31, 2022 at 4:56

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related