I've been utilizing the style-loader to insert CSS modularly into my components ({style.exampleClassName}).
My goal is to showcase a loader for a specific duration before displaying an image (at least 16 of these components in a grid layout).
This is what my current component structure looks like:
// Child Component
/**
*
* Initializes props for the child (icon)
*
*/
import React, { Component } from 'react';
import styles from './styles.css';
class Child extends React.Component {
constructor(props) {
super(props);
this.state = {
hidden : "shown",
loading: "loading"
};
}
componentDidMount() {
const self = this;
const wait = this.props.wait;
console.log('mounted');
setTimeout(() => {
console.log('timeout working ' + wait);
self.setState({
hidden: "hidden",
loading: "loaded"
});
}, wait);
}
render() {
const hidden = `styles.${this.state.hidden}`;
const loading = `styles.${this.state.loading}`;
return (
<div>
<link rel="stylesheet" type="text/css" href="./app/components/socialgrid/styles.css" />
<div className={this.state.hidden}>
<p>Loading...</p>
</div>
<div className={this.state.loading}>
<p>Child - {this.props.wait}ms</p>
</div>
</div>
)
}
};
export default Child;
// Parent
/**
*
* Individual Icon Component
*
*/
import React, { Component } from 'react';
import cx from 'classnames';
import Img from 'components/Img';
import Child from './Child';
// import Fb from './Fb.png';
class IndIcon extends React.Component{
render() {
return (
<div>
<div>
<Child wait={1000} />
<Child wait={5000} />
<Child wait={4000} />
</div>
</div>
)
}
};
export default IndIcon;.hidden,
.loading{
display: none;
}Normally, my styles would automatically apply themselves through className={styles.exampleClassName}, but I'm encountering an issue here where the class doesn't get applied because it changes based on state (as mentioned earlier, just trying different phrasing to clarify).
I wish to assign more than just the display:none property, therefore classes are necessary for these components.
Your assistance is greatly appreciated. Thank you!