score:3

Accepted answer

By updating below two methods you will get the solutions.

Pass id in hide method.

  table = () => {
    const tableDetail = Object.keys(postD).map((i) => (
      <div key={i}>
        <h2>{postD[i].title}</h2>
        <p>{postD[i].content}</p>
        <span ref={`ref-${postD[i].id}`} id={`test-${postD[i].id}`}>The Quick Brown Fox.</span>
        <button onClick={() => this.hide(postD[i].id)} >Like</button>
      </div>
    ));
  }

Use same id to get the ref.

hide = (id) => {
  const span = ReactDOM.findDOMNode(this.refs[`ref-${id}`]);
  span.className = "hidden";
}

Hope this will help!

score:0

You can use below snippet. I have updated your class. Just pass "id" to the hide method.

    class Test extends React.Component {
        constructor() {
            super();
        }

        hide = (id) => {
            const span = this.refs[`ref-${id}`]; 
            span.ClassName = "hidden";
        }

        table = () => {       
            const tableDetail = Object.keys(postD).map((i) => (
                    <div key={postD[i].id}>
                        <h2>{postD[i].title }</h2>
                        <p>{postD[i].content }</p> 
                        <span ref={`ref-${postD[i].id}`} id={`${postD[i].id}`}>The Quick Brown Fox.</span>
                        <button onClick={() => this.hide(postD[i].id)} >Like</button>
                    </div>
        }

        render() {
            return (
                <>  
                    <h2>Table</h2>
                    {this.table()}
                </>
            );
        }
    }

Related Query

More Query from same tag