javascript - Toggle Icon on Button click React - Stack Overflow

admin管理员组

文章数量:1415468

I am trying to toggle the button icon when clicked in React app. I looked into the console, the value of "togglePassword" is changing on click but the button icon is not changing... How to correct this out? Here is my code...

class Register extends Component {

    constructor() {
        super();
        this.state = {
            togglePassword: false
        };

        this.onToggle = this.onToggle.bind(this);
    }

    onToggle(e) {
      this.setState({ togglePassword: !this.state.togglePassword })
    }

    render() {
       return (
          <button onClick={this.onToggle} type="button">
             {
              this.state.togglePassword ? 
              <i className="fas fa-eye-slash"></i> : 
              <i className="fas fa-eye"></i>
             }
          </button>
       );
    }
}

The other method I tried is as below but the console gave me the following error when I clicked the button...

<button onClick={this.onToggle} type="button">
           {
            this.state.togglePassword &&
            (<i className="fas fa-eye-slash"></i>)
           }
           {
            !this.state.togglePassword &&
            (<i className="fas fa-eye"></i>)
           }        
</button>

Error: failed to execute "remove child" on "Node". The node to be removed is not a child of this node.

I am trying to toggle the button icon when clicked in React app. I looked into the console, the value of "togglePassword" is changing on click but the button icon is not changing... How to correct this out? Here is my code...

class Register extends Component {

    constructor() {
        super();
        this.state = {
            togglePassword: false
        };

        this.onToggle = this.onToggle.bind(this);
    }

    onToggle(e) {
      this.setState({ togglePassword: !this.state.togglePassword })
    }

    render() {
       return (
          <button onClick={this.onToggle} type="button">
             {
              this.state.togglePassword ? 
              <i className="fas fa-eye-slash"></i> : 
              <i className="fas fa-eye"></i>
             }
          </button>
       );
    }
}

The other method I tried is as below but the console gave me the following error when I clicked the button...

<button onClick={this.onToggle} type="button">
           {
            this.state.togglePassword &&
            (<i className="fas fa-eye-slash"></i>)
           }
           {
            !this.state.togglePassword &&
            (<i className="fas fa-eye"></i>)
           }        
</button>

Error: failed to execute "remove child" on "Node". The node to be removed is not a child of this node.

• javascript
• reactjs
• icons
• toggle
• react-ponent

Share Improve this question Follow edited Jun 13, 2020 at 10:59 Smile001 asked Jun 13, 2020 at 10:05 Smile001Smile001 16733 silver badges1010 bronze badges 1

• What do you mean by button icon? – Akshay Bande Commented Jun 13, 2020 at 10:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

There might be something else apart from the code you have provided,

Below code snippet, this is exact copy of your code, and its working fine :

---

class App extends React.Component {

    constructor() {
        super();
        this.state = {
            togglePassword: false
        };

        this.onToggle = this.onToggle.bind(this);
    }

    onToggle(e) {
      this.setState({ togglePassword: !this.state.togglePassword })
    }

    render() {
       return (
          <button onClick={this.onToggle} type="button">
             {
              this.state.togglePassword ? 
              "fa-eye-slash": 
              "fa-eye"
             }
          </button>
       );
    }
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

WORKING DEMO : with font awesome

try this :

 render() {
  const {togglePassword} = this.state
       return (
    <button onClick={this.onToggle} type="button">
           <i className={`fas fa-eye${togglePassword?"-slash:""}`}></i>
     </button>)
}

This seem to work for me with React Material MUI

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';

...

const [anchorEl, setAnchorEl] = React.useState(null);

  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

...

<Button id="fade-button"onClick={handleClick}>
Text
{anchorEl ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</Button>

本文标签： javascriptToggle Icon on Button click ReactStack Overflow