CODEWITHSUNDEEP
javascriptreactjs
Luksiuslukas2
Luksiuslukas2

Reputation: 89

React: set value with two last input numbers

Got a situation and I'm not sure how to tackle it. When writing numbers in this input, I want to see only two last inserted numbers, no matter how many numbers I type. Example:

Input = 5  Value = 5
Input = 59 Value = 59
Input = 597 Value = 97
Input = 5970 Value = 70
Input = 59701 Value = 01

And so on.

const [number, setNumber] = useState(0);
function handleChange(e) {
  setNumber(e.target.value);
}
return (
  <div>
    <input type="text" maxLength="2" value={number} onChange={handleChange} />
  </div>
)

Upvotes: 0

Views: 114

Answers (1)

keikai
keikai

Reputation: 15146

Transfer to string

Then use slice() to cut the last 2 numbers

const result = Number(e.target.value.toString().slice(-2));


const App = () => {
  const [number, setNumber] = React.useState(0);
  function handleChange(e) {
    const result = Number(e.target.value.toString().slice(-2));
    setNumber(result);
    console.log(result);
  }
  return (
    <div className="App">
      <input type="text" value={number} onChange={handleChange} />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Or a more complex way as below

Using split(), pop(), join()

const x = e.target.value.toString().split('');
const y = [x.pop(), x.pop()].reverse();
const result = Number(y.join(''));


const App = () => {
  const [number, setNumber] = React.useState(0);
  function handleChange(e) {
    const x = e.target.value.toString().split('');
    const y = [x.pop(), x.pop()].reverse();
    const result = Number(y.join(''));
    setNumber(result);
    console.log(result);
  }
  return (
    <div className="App">
      <input type="text" value={number} onChange={handleChange} />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Once you take full control with the handler function bound to onChange and value, there is no need for maxLength defaultValue related props.

Upvotes: 1

Related Questions