React - Unwanted height change when rendering an input field

Question

In the snippet attached to this post, I'm trying to render an input tag when a user clicks on a div. The input has to take the place of the div, avoiding giving to the user any hint that the component is changed (like the editablecell attribute).

When the input is rendered, I encounter a change in the height of the eleme

const styles = {
  cell: {
    width: "200px",
    border: "1px solid black",
    lineHeight: "30px",
    textAlign: "center",
    verticalAlign: "middle"
  },
  input: {
    width: "200px"
  }
};

const text = "Click on me";

class App extends React.Component {
  state = {
    active: false
  };

  handleClick = () => {
    this.setState(prevState => {
      return {
        active: !prevState.active
      };
    });
  };

  handleKeyPress = evt => {
    if (evt.charCode === 13) {
      this.setState(prevState => {
        return {
          active: !prevState.active
        };
      });
    }
  };

  render() {
    if (this.state.active) {
      return (
        <div>
          <input
            type="text"
            style={styles.cell}
            onKeyPress={this.handleKeyPress}
            placeholder="Press ENTER when done"
          />
          <p>Notice how the height is changing</p>
        </div>
      );
    } else {
      return (
        <div>
          <div style={styles.cell} onClick={this.handleClick}>
            {text}
          </div>
          <p>Notice how the height is changing</p>
        </div>
      );
    }
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 1

It is a problem with padding. Set it with a value and it will work as expected, take a look to this code.

const styles = {
  cell: {
    width: "200px",
    border: "1px solid black",
    lineHeight: "30px",
    textAlign: "center",
    verticalAlign: "middle",
    padding: "0"
  },
  input: {
    width: "200px"
  }
};

const text = "Click on me";

class App extends React.Component {
  state = {
    active: false
  };

  handleClick = () => {
    this.setState(prevState => {
      return {
        active: !prevState.active
      };
    });
  };

  handleKeyPress = evt => {
    if (evt.charCode === 13) {
      this.setState(prevState => {
        return {
          active: !prevState.active
        };
      });
    }
  };

  render() {
    if (this.state.active) {
      return (
        <div>
          <input
            type="text"
            style={styles.cell}
            onKeyPress={this.handleKeyPress}
            placeholder="Press ENTER when done"
          />
          <p>Notice how the height is changing</p>
        </div>
      );
    } else {
      return (
        <div>
          <div style={styles.cell} onClick={this.handleClick}>
            {text}
          </div>
          <p>Notice how the height is not changing</p>
        </div>
      );
    }
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

You're changing div and input with each other, and input have an additional padding so that in increase the height by 1px. Add padding: 1px to styles.cell should fix.