style tag completely disappears from ReactJS component on render-CodePudding

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>
        )
    }
}

CodePudding user response：

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 = setTimeout(
      () => this.handleTransformChange(),
      750
    );
  }

  componentWillUnmount() {
    clearTimeout(this.timer);
  }

  render() {
    let styles = { 
      transform: this.state.transform
    };

    return (
      <div style={{styles}}>
        <text id="shopItemGrid">RUN AWAY</text>
      </div>
    );
  }
}

CodePudding user response：

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.