Changing css style of a div at runtime using onClick in React

Question

I've just started using React, so I used the approach used normally in Javascript.

My approach in Javascript I have 6 forms and by using onClick on a span tag i shift the position of a particular form(shifting left and right by 540px) and display it in the div. All other form are located outside the div and I've set overflow : hidden so they are not visible. I just use document.getElementById.style.left = 540px in Javascript.

How can I do the same in ReactJS ? I've tried the same but it says

TypeError:document.getElementById(...) is null

The issue is this: so I used the approach used normally in Javascript but that's not how react works. You don't do direct DOM manipulation. You make left part of your component's state instead. — user5734311
– user5734311, Commented Apr 28, 2021 at 10:01

Wang Liang · Accepted Answer · 2021-04-28 10:04:23Z

1

you need to use the useRef() hook here is an example:

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.style.left = 540px();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>go left on click</button>
    </>
  );
}

edited Apr 28, 2021 at 10:04

Wang Liang

4,4527 gold badges26 silver badges50 bronze badges

answered Apr 28, 2021 at 10:02

elad BA

1,99814 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Changing css style of a div at runtime using onClick in React

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