Assign numbers to alphabets in react js

Question

• Firstly, i wanna assign numbers to all alphabets like this:a=1,b=2,c=3,d=4 etc.

• Secondly, I want to create an input field and submit Button.

• Thirdly, when I enter alphabets on that input field, (eg: abcd it shows 1234 because i already mentioned above, a=1, b=2, c=3, d=4).

• And last, I wanna to add them (eg: I entered "abcd" and output is 1234 and add them.)Final Output for abcd is 1+2+3+4 =10.

  import React,{useState} from 'react' import "../node_modules/bootstrap/dist/css/bootstrap.min.css"

const Data = () => { const [data, setData] = useState({a: 1,b: 2,c: 3,d: 4,e: 5,f: 6,g: 7,h: 8,i: 9,j: 10,k: 11,l: 12,m: 13,n: 14,o: 15,p: 16,q: 17,r: 18,s: 19,t: 20,u: 21,v: 22,w: 23,x: 24,y: 25,z: 26})

const changeHandler = e => {
    setData({...data,[e.target.name]:[e.target.value]})
   
   
}
const submitHandler=e=> {
    e.preventDefault();
    
  }
return (
<div>
    <form onSubmit={submitHandler}>
    <input type="text"onChange={changeHandler}/><br/>
    <button className="btn btn-primary"onClick={()=>setData(console.log(data))}>Click</button><br/>
    </form>


</div>

) }

export default Data

Answer 1

you can do something like this

const dictionary = Object.fromEntries(Array(26).fill('a').map((s, i) => [String.fromCharCode(s.charCodeAt() + i), i + 1]))


export default function App() {
  
  const [string, setString] = useState('')
  const [numbers, setNumbers] = useState([])
  const [total, setTotal] = useState(0)

  const changeHandler = (e) => {
    setString(e.target.value)
  }

  useEffect(() => {
      setNumbers(
        string.toLowerCase().split('').map(c => dictionary[c])
      )
  }, [string])

  const calculateTotal = () => {
    setTotal(numbers.reduce((a, b) => a + b, 0))
  }
  
  
  return (
    <div className="App">
    <div>{numbers.join(' ')}</div>
    <input type="text" onChange={changeHandler} value={string}/><br/>
    <button className="btn btn-primary"onClick={calculateTotal}>Click</button><br/>
    {total > 0 && <div>the total is {total} }
    </div>
  );
}

Answer 2

Presented below is one possible way to achieve the desired objective.

Code Snippet

const {useState} = React;

const Thingy = ({...props}) => {
  // state variable to hold user input
  const [userInput, setUserInput] = useState('');
  
  // state variable to track user submit button click
  const [showResult, setShowResult] = useState(false);
  
  // method to update "userInput" state variable
  const handleChange = ev => (setUserInput(ev.target.value), setShowResult(false));
  
  // method to conver a single character (a to z) into number (1 to 26)
  const convertChar = ch => {
    const c = ch.toLowerCase();
    // if user input is a digit, ensure return value is a "string"
    if ('0' <= c && c <= '9') return ch.toString();
    if (!('a' <= c && c <= 'z')) return ch;         // do not convert non-alpha
    return c.charCodeAt(0) - 'a'.charCodeAt(0) + 1;
  };
  
  // method to transform user-input into numbers
  const transformInput = () => userInput
    .split('')                    // split the string into array of individual letters
    .map(c => convertChar(c))     // use the "convertChar" method
    .join(' ');                   // join back to string with "space" seperator
                        // added a "space" only for rendering to UI

  // method to find the sum/total of numbers
  const getResult = () => userInput
    .split('')                  // convert string to array of individual letters
    .map(c => convertChar(c))   // transform a-z to numbers 1-26
    .filter(                    // discard any characters except a-z, A-Z
      c => (
        typeof c !== 'string' &&    // check letter is no longer "string"
        !isNaN(c)                   // and it is not "NaN"
      )
    )
    .reduce(                    // add the numbers using ".reduce()"
      (total, itm) => total + itm, 0
    );
  
  // return the JSX that will be rendered on the UI
  // ----
  // description of elements
  // ^^^^^^^^^^^ ^^ ^^^^^^^^
  // 1. label - "enter text" to prefix the input-box
  // 2. input - to obtain the user input
  // 3. "<p>" - paragraph elt to show a-z transformed to 1-26
  // 4. button - submit button to calculate the sum
  // 5. "<p>" - paragraphe elt to show the result of the summation
  // -----
  // NOTE: Items 4, 6 and conditionally rendered
  return (
    <div>
      <div>
        <label htmlFor={'usrinp'}>Enter text: </label>
        <input
          id="usrinp"
          value={userInput}
          onChange={handleChange}
        />
      </div>
      {
        userInput.length > 0 &&
        <p>Converted text to: {transformInput()}</p>
      }
      <button onClick={() => setShowResult(true)}>
        Submit
      </button>
      {
        showResult && <p>Result is: {getResult()}</p>
      }
    </div>
  );
};

ReactDOM.render(
  <div>
    <h4>Transform User input text to numbers</h4>
    <Thingy />
  </div>,
  document.getElementById("rd")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="rd" />

Explanation

Inline comments added to the snippet above.