Convert a Number or a String

Question

I'm new to the "React" javascript framework to improve my skills, I gave myself as an exercise to convert a number or string into a symbol. For example a number will convert like this and a string will convert like this <?L> I present to you my code that I was able to write to reach the end of my exercise

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

export default function Accueil() {

    //submit
    const ConvertResult = e => {
        e.preventDefault();
    }

    //input
    const [InputState, setInputState] = useState();

    const InputContain = e => {
        setInputState(e);
    }
    //button
    const [ConvertInput, setConvertInput] = useState();

    const ConvertData = () => {
        if(typeof InputState === 'string'){
            setConvertInput('?d')
        }
    }


    return (
        <div className="Accueil_Container">
            <div className="Accueil_main">
                <form onSubmit={e => ConvertResult(e)}>
                    <input type="text"
                    onInput={e => InputContain(e.target.value)}/> <br/>

                    <button onClick={ConvertData}>Convert</button>
                </form>
            </div>
            <span>
                {ConvertInput}
            </span>
        </div>
    )
}

and here is the result I get in return https://i.stack.imgur.com/AoRv0.png

characters such as <?d> or <?L> do not appear as many times as the string inserted in the input

if I could get some help from the more experienced or someone who has any idea how to fix this it will warm my heart.

I've been looking for a solution on the inte.net for 3 days, but nothing solves my problem or maybe I'm not typing the right keywords.

Answer 1

it seems like you set the variable "Inputstate" everytime you put in a new character but you dont give back the result every time, just once at the and.

how I roughly would put it into Code:

var Displaystring;
const InputContain = e => {
        setInputState(e);
        if(typeof InputState === 'string'){
            Displaystring = Displaystring + '?d';
        }
    }

so you create a string that contains the converted data and add a symbol every time an input is registered in the input form. hope it made it a little clearer, sorry for the late answer