Number converter: decimal to base(2-36) ReactJs
Tags: react, javascript, beginners
Published: 2022-11-09 22:01:27

This is an app that converts decimal numbers to base(2-36). The user indicates both, the number you want it to be converted and the base.

You can find the code [here](https://stackblitz.com/edit/react-gqtueu?file=src/App.js)

##JavaScript
Javascript gives us as default decimal numbers but it has a method to convert them to base 2-36:

```Javascript
let number = 10;
console.log(number.toString(2));//1010
```
##ReactJS
Let's see, our app will need:

- 2 user input: decimal and base
- An event that makes the conversion
- The result display on the screen

###First
 A basic structure of our app 

```javascript

const App = () => {
return(
<>
 <h2>Number converter</h2>
 //Decimal
  <input/>
  //Base
  <input/>
  //Display the result
  <p>{}</p>
</>
);
}

export default App;
``` 
###Second:
We need to store the user and conversion data.

```javascript
import React from 'react';
import { useState } from 'react';

const App = () => {
//Store decimal
const [decimal, setDecimal] = useState('');
//Store base
const [base, setBase] = useState('');
//store conversion data
const [convert, setConvert] = useState(0);
return(
<>
<h2>Number converter</h2>
//Decimal
<input/>
//Base
<input/>
//Display the result
<p>{}</p>
</>
);
}

export default App;
```

###Third:
Let's track the user input

```javascript
function App() {
  const [decimal, setDecimal] = useState('');
  const [base, setBase] = useState('');
  const [convert, setConvert] = useState(0);
  return (
    <div>
      <h2>Number converter</h2>
      <p>Decimal to base 2-36 </p>

      <form>
        <input
          type="text"
          placeholder="decimal"
          value={decimal}
          onChange={(event) => setDecimal(event.target.value)}
        />

        <input
          type="text"
          placeholder="base(2-36)"
          value={base}
          onChange={(event) => setBase(event.target.value)}
        />
        <button type="submit">Convert</button>
      </form>

      <p>{convert}</p>
    </div>
  );
}

export default App;
``` 

###Fourth:
Add a form and the event that makes the conversion

```javascript
function App() {
  const [decimal, setDecimal] = useState('');
  const [base, setBase] = useState('');
  const [convert, setConvert] = useState(0);

  const convertNumber = (event) => {
    event.preventDefault();
    setConvert(numberConverterBase(decimal, base));
  };

  const numberConverterBase = (decimal, base) => {
    return Number(decimal).toString(Number(base));
  };

  return (
    <div>
      <h2>Number converter</h2>
      <p>Decimal to base 2-36 </p>

      <form onSubmit={convertNumber}>
        <input
          type="text"
          placeholder="decimal"
          value={decimal}
          onChange={(event) => setDecimal(event.target.value)}
        />

        <input
          type="text"
          placeholder="base(2-36)"
          value={base}
          onChange={(event) => setBase(event.target.value)}
        />
        <button type="submit">Convert</button>
      </form>

      <p>{convert}</p>
    </div>
  );
}

export default App;
```
And taht's it!