[Solved]-how to get the id of element inside render and pass it to a function-Reactjs

Here is the code. You can do it without making use of ref and use the event instead

handleClickOnLink(e,data){
  console.log(e.target.id,data);
}

<li>
    <a id="tester" onClick={(e) => 
       this.handleClickOnLink(e,"profile")}>
       Profile
    </a>
</li>

You can get the id through the ref of the <a>. You are using the legacy ref so I'll do it with the new way.

<li>
  <a
    id="profile"
    ref={(ref) => { this.profile = ref; }}
    onClick={() => this.handleClickOnLink(this.profile && this.profile.getAttribute('id'))}
  >
    Profile
  </a>
</li>

The problem is that arrow functions does not bind it's own this. Instead it actually refers to the originating context. Read docs.

One possible way to achieve what you need is using the event.target object:

handleClickOnLink(event) {
    console.info('elem id:', event.target.id);
}
render() {
    return (
        <ul>
            <li>
                <a id="profile" href="#" onClick={this.handleClickOnLink}>
                    Profile
                </a>
            </li>
        </ul>
    );
}

The event (SyntheticEvent) object is passed to elements event handlers like the onClick. Read more here, and also how to provide extra arguments to event handlers.

Note that handleClickOnLink function needs to be properly binded to the component instance in the class constructor, or change it's definition to an arrow function.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClickOnLink = this.handleClickOnLink.bind(this);
  }
  handleClickOnLink(e) {
    console.info('elem id ->', e.target.id);
  }
  render() {
    return (
      <ul>
        <li>
          <a id="profile" href="#" onClick={this.handleClickOnLink}>
            Profile
          </a>
        </li>
        <li>
          <a id="extra" href="#" onClick={this.handleClickOnLink}>
            Extra
          </a>
        </li>
      </ul>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>