MDBIcon toggle

Topic: MDBIcon toggle

Denzil free asked 3 years ago

Hi,

I'm trying to implement Icon toggle (on/off) by changing component prop 'icon' to a different one on state change. Like below:

<MDBIcon icon={this.state.isOn ? "video" : "video-slash"} size="2x"/>

Is is possible?

I also tried to swap the whole MDBIcon component based on state

{this.state.isOn ?
(<MDBIcon className="mt-1" icon="video" size="2x"/>)
 :
(<MDBIcon className="mt-1" icon="video-slash" size="2x"/>)
}

Can you help please?

Thanks.

Add comment

Jakub Chmura staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi @Denzil,

Thank you for your code sample. Now I know what's going wrong.

In index.js file you should add all imports before App.js

example below:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

After this little change, everything should work well.

Best, Kuba

Denzil free commented 3 years ago

Yes, that made it working, thanks, I'll look into the main project to see what is effecting the component, now I have it working in test.

Thanks.

Denzil free commented 3 years ago

Hi Kuba,

I know exactly what is causing it, it is this file:import '@fortawesome/fontawesome-free/js/all.js';

I can see the FA icons in test project, but for some reason without JS file FA icons does not show in real project.

I'm using "@fortawesome/fontawesome-free": "^5.12.1", in dependencies

And

Including:

import '@fortawesome/fontawesome-free/css/all.min.css';import '@fortawesome/fontawesome-free/js/all.js';

Is there a way around it? Thanks.

Jakub Chmura staff commented 3 years ago

Your project and icons runs properly when you include CSS and JS import?

Denzil free commented 3 years ago

Correct, except for MDBIcon toggle, and without JS no icons are showing. With test project thought, it does work without JS and showing icons, I need to look into this.

Denzil free commented 3 years ago

Ok, I got it, MDB is using CSS+Webfont, where I'm using JS+SVG fontawesome. Toggle makes MDB component to change 's class, which does nothing because there is no in JS+SVG, but instead there is element.

I'm not sure if there is a workaround, I can't make MeteorJS + React working with CSS+Webfont, there are many articles suggesting to use JS version with Meteor.

Denzil free commented 3 years ago

Found a workaround: apparently there is an issue with loading web fonts from within NPM package, so I need to copy all the fonts to /public folder. Not ideal but made it working with CSS approach, supported by MDB. Thanks for help!

Jakub Chmura staff commented 3 years ago

Nice to hear that you solve your problem!

If you have additional questions, don't hesitate to ask us.

Add comment

Denzil free answered 3 years ago

0 0 Best answer

<pre class="prettyprint"><code>import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import '@fortawesome/fontawesome-free/css/all.min.css';
import '@fortawesome/fontawesome-free/js/all.js';

import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

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

serviceWorker.unregister();

**** App.jsx *****
import React, { Component } from 'react';
import { MDBContainer, MDBIcon, MDBBtn } from 'mdbreact';

class App extends Component {
  state = {
    isOn: false,
  };

toggle = () => {
    this.setState({
      isOn: !this.state.isOn,
    });
    console.log(this.state.isOn)
  };

render() {
    return (
      <MDBContainer>
        <MDBBtn onClick={this.toggle}>
          <MDBIcon size='lg' icon={this.state.isOn ? 'video-slash' : 'video'} />
        </MDBBtn>
      </MDBContainer>
    );
  }
}

export default App;
</code></pre>

Please insert min. 20 characters.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import '@fortawesome/fontawesome-free/css/all.min.css';
import '@fortawesome/fontawesome-free/js/all.js';

import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

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

serviceWorker.unregister();

**** App.jsx *****
import React, { Component } from 'react';
import { MDBContainer, MDBIcon, MDBBtn } from 'mdbreact';

class App extends Component {
  state = {
    isOn: false,
  };

  toggle = () => {
    this.setState({
      isOn: !this.state.isOn,
    });
    console.log(this.state.isOn)
  };

  render() {
    return (
      <MDBContainer>
        <MDBBtn onClick={this.toggle}>
          <MDBIcon size='lg' icon={this.state.isOn ? 'video-slash' : 'video'} />
        </MDBBtn>
      </MDBContainer>
    );
  }
}

export default App;

Add comment

Jakub Chmura staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi @Denzil,

I made an example app with changing MDBIcon:

import React, { Component } from 'react';
import { MDBContainer, MDBIcon, MDBBtn } from 'mdbreact';

class SideNavPage extends Component {
  state = {
    isOn: false,
  };

  toggle = () => {
    this.setState({
      isOn: !this.state.isOn,
    });
  };

  render() {
    return (
      <MDBContainer>
        <MDBBtn onClick={this.toggle}>
          <MDBIcon size='lg' icon={this.state.isOn ? 'video-slash' : 'video'} />
        </MDBBtn>
      </MDBContainer>
    );
  }
}

export default SideNavPage;

Please check if this works in your case.

Best, Kuba

Denzil free commented 3 years ago

Hi, thanks for sending the code, but it doesn't work for me, I have tried it in full in our project, and also in new project.

Our environment: - mdbreact@4.26.1 - npm: '6.14.0' - node: '12.16.1' - react@16.13.1

Jakub Chmura staff commented 3 years ago

In most cases like yours this solution works:

Please delete the node_modules folder and the package-lock.json/yarn.lock file in your main project folder. Then open the console in our main project folder and type npm i or yarn.

If reinstalling your dependency didn't work in your case please give me more details about your project, paste here a sample of Your code ( Code what you give to me works well, so when it's not working in your case it could be caused by another issue at your component and we need to take a look at this).

Best, Kuba

Please insert min. 15 characters.

Denzil free commented 3 years ago

Hi,

I have created a brand new project to test it, so node_modules were just created.

There is nothing else in this new project but your submitted "SideNavPage" components, still it does not work.

Please find a whole code in new comment below

Thanks.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.26.1
Device: MacBook
Browser: Chrome
OS: MacOsx
Provided sample code: No
Provided link: No

Denzil

200Support score
10Questions 15Answers 0Snippets