React: Dynamic styles in component not updating

Question

I am trying to make a component with a dynamic size based on its props. Currently, I am testing it with the following setup, however when I adjust the slider, the component doesn't change size

// View.js
import React, { Component } from 'react';
import Cell from './Cell'

export default class View extends Component {
  constructor(props) {
    super(props);

    this.handleSlide = this.handleSlide.bind(this);

    this.state = {
      cellSize: 50
    };
  }

  handleSlide(event) {
    this.setState({
      cellSize: event.target.value
    });
  }

  render() {
    return (
      <div>
        <input type="range" min="1" max="100" value={this.state.cellSize} onChange={this.handleSlide} />

        <Cell size={this.state.cellSize}/>

      </div>
    );
  }
}

// Cell.js
import React, { Component } from 'react';

export default class Cell extends Component {

  render() {
    const cellSize = {
      width: this.props.size,
      height: this.props.size
    }

    return (
      <div style={cellSize}>
      </div>
    );
  }
}

What am I doing wrong

kind user · Accepted Answer · 2020-05-01 17:35:32Z

1

You are missing units for the width and height properties. You can use template literals:

const cellSize = {
   width: `${this.props.size}px`,
   height: `${this.props.size}px`,
};

or string concatenation:

const cellSize = {
   width: this.props.size + 'px',
   height: this.props.size + 'px',
};

edited May 1, 2020 at 17:35

answered May 1, 2020 at 17:34

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: Dynamic styles in component not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related