0

I'm trying to change a button icon image to an image on my computer, yet prime react doesn't seem to allow me to do this. I have tried:

  1. linking the button to an external style-sheet and changing background image from there.
  2. Using an inline style attribute style={ }

No avail, any help is appreciated!

JavaHava
  • 189
  • 2
  • 15

1 Answers1

0

it's possible if you call the icon path in a state of your HOC (component class) and update the state inside an event (onClick) by calling setState()

import React, {Component} from 'react';
import './beside-App-js.css'
class App extends Component {

    state = {
        icone: "pathToCurrent/img.png"
    }

    onChangeFunction = (newimg) => {
        this.setState({
            icone: newimg
        })
    }

    render() {
        const {icone} = this.state;

        return (
            <div>

                <button onClick={this.onChangeFunction.bind(this,"newpath")}>change <img src={icone} /></button>
            </div>
        );
    }
}

export default App;

Codepen

DOUICHI Abdesselam
  • 1
  • 1
  • No doubt this works, but only on click. My problem is that primereact won't let me change the icon of a button permanently (the icon you first see on the button when the page loads up). – JavaHava Jun 25 '19 at 11:56
  • it's not the `onclick` who change the image it's the methode `this.setState`, you use it in events (`onClick`, `onChange` ...) or at loading of component (`componentDidMount() ` {) it's will change data or icone directrly – DOUICHI Abdesselam Jun 26 '19 at 12:51