Topic: MDBIcon toggle
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.
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 commented 5 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 premium commented 5 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
Denzil commented 5 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.
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;
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 commented 5 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 commented 5 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 premium commented 5 years ago
Your project and icons runs properly when you include CSS and JS import?
Denzil commented 5 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 commented 5 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 commented 5 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 premium commented 5 years ago
Nice to hear that you solve your problem!
If you have additional questions, don't hesitate to ask us.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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