I have a number that, when clicked, should bee editable. I've looked at form inputs and other React libraries, but none of them are what I'm looking for. The screenshots below are mockups.

To keep the UI consistent, all I'm doing is adding a border around the number when the edit button is clicked. (Code below is simplified to just demonstrate functionality)

constructor() {
    this.state = {
        editModeEnabled: false
    }
}

handleEditClick() {
    this.setState({
        editModeEnabled: !this.state.editModeEnabled
    })
}

render() {
    let numberBox = null
    if (this.state.editModeEnabled) {
        numberBox = {
            border: '1px solid blue',
        }
    }

    <span style={dollarStyle}>$</span>
    <div style={numberBox}>
        {this.props.number}
    </div>

    <button onClick={this.handleEditClick.bind(this)}></button>
}

I'm wondering if there's a way to make the number editable in an input field of some sort without altering the look of the number. I've tried to wrap the number inside a <input> tag but it's a pain in the ass to style an input tag.

I have a number that, when clicked, should bee editable. I've looked at form inputs and other React libraries, but none of them are what I'm looking for. The screenshots below are mockups.

To keep the UI consistent, all I'm doing is adding a border around the number when the edit button is clicked. (Code below is simplified to just demonstrate functionality)

constructor() {
    this.state = {
        editModeEnabled: false
    }
}

handleEditClick() {
    this.setState({
        editModeEnabled: !this.state.editModeEnabled
    })
}

render() {
    let numberBox = null
    if (this.state.editModeEnabled) {
        numberBox = {
            border: '1px solid blue',
        }
    }

    <span style={dollarStyle}>$</span>
    <div style={numberBox}>
        {this.props.number}
    </div>

    <button onClick={this.handleEditClick.bind(this)}></button>
}

I'm wondering if there's a way to make the number editable in an input field of some sort without altering the look of the number. I've tried to wrap the number inside a <input> tag but it's a pain in the ass to style an input tag.

• javascript
• css
• reactjs

• 3 did you tried simply returning a different JSX block in the render function if editModeEnabled is true? – Sebastianb Commented Feb 10, 2017 at 20:02
• 1 @Jordan thank you for being helpful and contributing to this question. – patrickhuang94 Commented Feb 10, 2017 at 20:09
• but it's a pain in the ass to style an input tag what do you mean? border:none; background:transparent: padding:0; and it looks like a span (besides its width). So, where's the pain? – Thomas Commented Feb 10, 2017 at 20:31

3 Answers 3

Just style the <input>. There are other ways to solve this, but none as simple as just using CSS for its intended purpose. The below is just an example, and you'll surely need to finesse it a bit for your target platform(s) and design, but you won't run into the same kinds of headaches you will if you try to find some non-CSS workaround.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editModeEnabled: false,
    }
  }
  
  handleEditClick() {
    this.setState({ editModeEnabled: !this.state.editModeEnabled });
  }

  render() {
    return (
      <form>
        $<input type="number" value={this.props.number} disabled={!this.state.editModeEnabled}/>
        <a role="button" title="Edit" onClick={this.handleEditClick.bind(this)}>✏️</a>
      </form>
    );
  }
}

ReactDOM.render(<App number={5}/>, document.getElementById('container'));

input {
  border: 1px solid blue;
  display: inline-block;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  width: 2em;
  line-height: inherit;
  vertical-align: inherit;
  text-align: right;
  color: inherit;
  font: inherit;
  background: none;
}

input[disabled] {
  border: 0;
}

a { cursor: pointer; text-decoration: none; }

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

You can use <div contenteditable="true">

Although, the most correct way in this case is probably to figure out the good style properties for your input since contenteditable has HTML properties you're most likely not interested in.

You can use Bootstrap 3, Jquery, or JQuery UI as well. Bootstrap is the best option among all these because of having excess material over the internet. You can use "X-Editable". This will provide you to make that specific field editable of will open a pop-over on the input field. Link: https://vitalets.github.io/x-editable/