score:10

Accepted answer

this can be achieved with a simple toggle handler:

const imagespath = {
  minus: "https://images.vexels.com/media/users/3/131484/isolated/preview/a432fa4062ed3d68771db7c1d65ee885-minus-inside-circle-icon-by-vexels.png",
  plus: "https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png"
}

class app extends react.component {
  state = {
    open: true
  }
  toggleimage = () => {
    this.setstate(state => ({ open: !state.open }))
  }

  getimagename = () => this.state.open ? 'plus' : 'minus'

  render() {
    const imagename = this.getimagename();
    return (
      <div>
        <img style={{maxwidth: '50px'}} src={imagespath[imagename]} onclick={this.toggleimage} />
      </div>
    );
  }
}

const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);
<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="root"></div>

edit
note that i passed a function parameter for setstate because my new state depends on the old state. you can read more about it in the docs

score:-2

assuming this is inside the render function:

<div>
  <img onclick={() => {this.setstate({clicked: true})} 
       src={'../../' + (this.state.clicked ? 'plus' : 'minus') + '.png'}} />
</div>

score:0

try this sample code on button click change the condition to render the img src:

    import react from "react";
import "./styles.css";
import { card, cardimg, cardbody, button } from "reactstrap";
class app extends react.component {
  constructor() {
    super();
    this.state = {
      loginstate: true
    };
  }

  render() {
    let sessonstate;
    let imgurl;
    if (this.state.loginstate) {
      sessonstate = "logged in";
      imgurl = "https://picsum.photos/id/237/200/300";
    } else {
      imgurl = "https://picsum.photos/seed/picsum/200/300";
      sessonstate = "logged out";
    }

    return (
      <div>
        <h1>session {sessonstate}!!</h1>
        <br />
        <div classname="container">
          <div classname="row">
            <div classname="col-md-4">
              <card classname="shadow">
                <cardimg top width="100%" src={imgurl} alt="card image cap" />
                <cardbody>
                  <button
                    classname="shadow-sm btn "
                    onclick={() => {
                      this.setstate({
                        loginstate: false
                      });
                      console.log(`${imgurl}`);
                    }}
                  >
                    button
                  </button>
                </cardbody>
              </card>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default app;

score:0

import react, { usestate } from 'react';
import './bulbs.css';

function bulb(){

    const bulboff = require('../assets/bulboff.png');
    const bulbon = require('../assets/bulbon.png');
    const images = {bulboff,bulbon};
    const [img, setimg] = usestate(false);

    const imgchangehandler = () => {
        if(!img) {
            setimg(true);
        }else{
            setimg(false)
        }
    };
    return(
        <div>
            <img src={!img ? bulboff : bulbon } alt='bulb-off' onclick={imgchangehandler}/>
        </div>
    )
}


export default bulb;

Related Query

More Query from same tag