Currently, I am working on creating an onboarding screen where the user is required to select three or more items. Once the user clicks on an item, a purple overlay should remain visible.
For reference, this is what I have in mind: https://i.sstatic.net/r89UP.png
Sharing my code snippet below:
var RepeatModule = React.createClass({
getInitialState: function() {
return { items: this.props.items || [] }
},
componentWillMount: function() {
console.log("componentWillMount()")
this.setState({ items : data })
console.log(data,"data is here");
},
handleClick: function (e, item) {
this.setState({active: true});
},
render: function() {
var listItems = this.state.items.map(function(item) {
return (
<ListItem item={item}/>
);
});
return (
<div className="flex-container">
{listItems}
</div>
);
}
});
/* Making the items stateless */
var ListItem = function(props) {
var backgroundImage = {
backgroundImage: 'url(' + props.item.pictureURL + ')'
};
return (
<div className="block-grid-item">
<a className="display-block card text-gray-darker">
<div onClick={handleClick} style={backgroundImage} className="card-img-wrap m-xs-0 placeholder placeholder-landscape">
</div>
<div className="card-meta">
<div className="vesta-hp-gifts-card-title text-gray-darker">{props.item.storeName}</div>
</div>
</a>
</div>
);
}
I seem to be facing an issue with maintaining the active state when attempting to implement it within my handleClick function.
Additionally, here is the CSS effect related to the hover functionality:
.card-img-wrap::after
{
background-color: #000;
bottom: 0px;
content: "";
left: 0px;
opacity: 0;
position: absolute;
right: 0px;
top: 0px;
}
.card-img-wrap:hover::after
{
background-color: #000;
bottom: 0px;
content: "";
left: 0px;
opacity: 0;
position: absolute;
right: 0px;
top: 0px;
opacity: 0.6;
background-color: #5450DC;
}
Could anyone shed some light on why this setup is not functioning as expected? Any suggestions on how to accomplish this task effectively?