change images onclick in reactjs

Question

const imagesPath = {
  eligibilitypng: "C:/Users/DHANUNJAY/datri/src/validatemoilenumberpng.png.",
  validatemoilenumberpng: "C:/Users/DHANUNJAY/datri/src/eligibilitypng.png"
}
         
class App extends Component {        
  state = {
    open: true
  }  
  toggleImage = () => {
    this.setState(state => ({ open: !state.open }))
  }

  getImageName = () => this.state.open ? 'eligibilitypng' : 'validatemoilenumberpng' 
  render() {    
    const imageName = this.getImageName();

    return (           
      <HashRouter>        
       <nav className="nav">         
        <div>      
        <div className="content">
        <div class="donorTitle"><b>Donor Registration</b></div>  <br/>    
          <ul className="header">  
          <div class="sibling-fade">

            <font size="18px" color="white"><li> <NavLink to="/"><img src={eligibilitypng} onClick={this.toggleImage}/></NavLink></li></font>
            <li> <NavLink to="/ValidateMobileNumber"><img src={validatemoilenumberpng}/> </NavLink></li> 
            
        </div>      
             <Route exact path="/" component={EligibilityCheck}/> 
            <Route path="/ValidateMobileNumber" component={ValidateMobileNumber}/>
            
            </div>      
        </nav>    
        </HashRouter>          
    );     
  }      
}          
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
      
export default App;             

Answer 1

import eligibilitypng from "C:/Users/DHANUNJAY/datri/src/validatemoilenumberpng.png.";
import validatemoilenumberpng from "C:/Users/DHANUNJAY/datri/src/eligibilitypng.png";


<li onClick={this.toggleImage}>{this.state.open ? <img src={eligibilitypng} /> : <img src={validatemoilenumberpng } />}</li>