Here is the code, not sure if this is an issue with React or a simple typo, but as soon as this component renders, the entire style tag disappears. What this code does is change the transform scale every 750ms to a random size between 0 and 0.5, but as stated, it's having an issue even rendering the tag, which is strange.
let styles = {
transform: `scale(0.5);`
}
function changeStyle() {
var r = -0.1 + Math.random() * (0.2 - 0) + 0;
styles = {
transform: `scale(${r});`
};
setTimeout(changeStyle, 750);
}
changeStyle();
export default class Runaway extends Component {
componentDidMount() {
console.log("Booting up Runaway button v1 by Ashe Muller.")
}
render() {
return (
<div style={{styles}}>
<text id="shopItemGrid">RUN AWAY</text>
</div>
)
}
}
The way the code is structured now, styles would never change, because changeStyle() is never getting called within the component.
Try something like this:
export default class Runaway extends Component {
constructor() {
super();
this.state = {
transform: 'scale(0.5)'
}
}
handleTransformChange = () => {
var r = -0.1 + Math.random() * (0.2 - 0) + 0;
var newTransform = `scale(${r})`;
this.setState({
transform: newTransform
});
}
componentDidMount() {
console.log("Booting up Runaway button v1 by Ashe Muller.")
this.timer = setInterval(
() => this.handleTransformChange(),
750
);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
let styles = {
transform: this.state.transform
};
return (
<div style={styles}>
<text id="shopItemGrid">RUN AWAY</text>
</div>
);
}
}
your let 'styles' is already an object and should be passed as such to your div style:
<div style={styles}>
so that the result would be :
<div style={{ transform: `scale(0.5);` }}>
In your case you're adding a level of object and finally your style looks like this:
style={{ styles : { transform: `scale(0.5);` }}
which is not a valid style.