CODEWITHSUNDEEP
cssreactjsstate
user15996859
user15996859

Reputation:

How do I set css style in states on React?

I am trying to set an updated size to an element using this statement.

const [size, setSize] = useState({});

I want to state my initial size to:

transform: scale(1, 1) translate3d(0, 0, 0);

Once the element is clicked, I want to enlarge my element to this:

transform: scale(2, 2) translate3d(0, 0, 0);

This is how I will be triggering the element to update to the new setSize.

const onClickHandler = (event) => {
setSize= transform: scale(2, 2) translate3d(0, 0, 0);
}

Upvotes: 1

Views: 369

Answers (1)

Matthew Kwong
Matthew Kwong

Reputation: 2937

You can do one of the following:

Option 1

const [style, setStyle] = useState({});

const onClickHandler = () => setStyle({
  transform: "scale(2, 2) translate3d(0, 0, 0)"
});

return (
  <div style={style}>
    {/* some components */}
  </div>
);

Option 2

const [scale, setScale] = useState(1);
const style = useMemo(() => ({ // to prevent unnecessary re-rendering
  transform: `scale(${scale}, ${scale}) translate3d(0, 0, 0)`
}), [scale]);
const onClickHandler = () => setScale(2);


return (
  <div style={style}>
    {/* some components */}
  </div>
);

Upvotes: 2

Related Questions