How to access/override the className of an element using refs?

Question

I have a text and a button.

What I want to achieve is something like this, that if I clicked the Button the Text will be hidden. I want to achieve this without using state.

class Test extends Component {
    constructor(props){
        //codes
    }

    hide = () => {
        const span = this.refs.spanLoading;
        span.ClassName = "hidden";
    }

    render() {

        return (
            <span ref="spanLoading" id="test-id" className="">The Quick Brown Fox.</span>

            <button onClick={() => this.hide()}>Hide</button>
        );
    }
}

export default Test;

Answer 1

You can use useRef() hook.

Maintain one ref object which is not a string.

const {useRef} = React;

function App() {
  const ref = useRef(null);
  const onClick = () => {
    const span = ref.current; // corresponding DOM node
    span.className = "hidden";
  };
  return (
    <div>
      <span ref={ref} className="">The Quick Brown Fox.</span>
      <button onClick={onClick}>Hide</button>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

This can be achieved simply, your approach is correct just some few fixes.

• You can return only one element in JSX
• The ref should be maintained somewhere in JS memory

Check this code and the working codesandbox instance here

class Test extends React.Component {
  constructor() {
    super();
    this.inputRef = React.createRef();
  }

  hide = () => {
    console.log(this.inputRef);
    this.inputRef.current.style.visibility="hidden";
  };

  render() {
    return (
      <>
        <span ref={this.inputRef} id="test-id" className="">
          The Quick Brown Fox.
        </span>
        <button onClick={() => this.hide()}>Hide</button>
      </>
    );
  }
}

EDIT! As you asked about dynamically generated refs...

This is what I understood as your requirement... see whether it matches it.

Working sandbox here

class Test extends React.Component {
  constructor() {
    super();
    this.inputRef = React.createRef();
    this.refCollection = {};
    for (let id = 0; id < 10; id++) {
      this.refCollection["id_" + id] = React.createRef();
    }
  }

  hide = e => {
    console.log(this.inputRef);
    this.inputRef.current.style.visibility = "hidden";
  };

  hideInCollection = k => {
    let changedRef = this.refCollection[k];
    changedRef.current.style.visibility = "hidden";
  };
  render() {
    return (
      <>
        <span ref={this.inputRef} id="test-id" className="">
          The Quick Brown Fox.
        </span>

        <button onClick={() => this.hide()}>Hide</button>
        {Object.keys(this.refCollection).map(k => (
          <div>
            <span ref={this.refCollection[k]} id="test-id" className="">
              Looped the Quick Brown Fox
            </span>
            <button onClick={() => this.hideInCollection(k)}>Hide</button>
          </div>
        ))}
      </>
    );
  }
}

Answer 3

class Test extends Component {
    constructor(props){
        this.hide = this.hide.bind(this);
    }

    hide() {
        this.span.classList.add("hidden");
    }    

    render() {

        return (
          <div>
            <span ref={(el) => { this.span = el; }} id="test-id" className="">The Quick Brown Fox.</span>

            <button onClick={this.hide}>Hide</button>
          </div>
        );
    }
}

export default Test;

You should return a single element tho