How do I get my input to be displayed all at once instead of one by one

by

So I am running a string reverse function. I have an input that console logs out whatever was typed into the input in reverse but now my problem is that when the text is being consoled out, it displays the letters one by one and I do not want that. I want it to return all the letters at once as a word. This is what my code looks like.

function Reduxy() {
    const reverse = (str) => {
        let reversedString = '';
        setTimeout(() => {
            for(var i = str.length-1; i >= 0; i--){
                reversedString+=str[i];
            }
            console.log(`Reversed string ${reversedString}`);
        }, 2000);
    }
  return (
    <div>
        <input type="text" placeholder="type word" onChange={e => reverse(e.target.value)} />
        {/* <button onClick={}>Submit</button> */}
    </div>
  )
}

export default Reduxy

Where could I be going wrong?

  • It’s currently displaying the values as you type them because the onChange event is invoked with each change. If you want to wait until a later time instead, what other event are you looking to use? You appear to have started to create a button, was your intent to display the final result upon clicking that button? (Note: “Display” usually refers to something in the UI, not simply logging to the console. Given the code shown, I’m assuming that you’re referring to logging to the console.)

    – 




  • Oh I forgot to remove the button but what i am trying to do for now is that when the user first types, after 2 seconds, take whatever has been typed and console.log() it but when being console logged I want it all as one word not all the iterations at different times. I understand about the onChange event but what other event can I use that does not trigger with each change? @David

    – 




  • Take a look at “Debouncing” concept in JS. It can help you with “but what other event can I use that does not trigger with each change?”

    – 

It’s currently writing the values to the console as you type them because the onChange event is invoked with each change here.

Based on this comment above, it sounds like you’re not looking to respond to some future event but rather to implement a 2-second de-bounce window, in which the value is logged to the console only if the user has typed something and has stopped typing for 2 seconds.

In React I’d do this with a combination of useState and useEffect. First you’d keep the value in state and all the input does is update that state. Every state update re-renders the component, and useEffect would make use of that by creating a 2-second timeout to display the value, and canceling that timeout any time the component re-renders.

For example:

import { useState, useEffect } from "react";

function Reduxy() {
  // State to store the value
  const [myValue, setMyValue] = useState("");

  useEffect(() => {
    // Ignore the initial state
    if (myValue !== "") {
      // Set a timeout to display the reversed value
      const timeout = setTimeout(() => {
        reverse(myValue);
      }, 2000);

      // Cancel that timeout when the component unmounts
      return () => clearTimeout(timeout);
    }
  }, [myValue]);

  // No changes were made to this function
  const reverse = (str) => {
    let reversedString = "";
    setTimeout(() => {
      for (var i = str.length - 1; i >= 0; i--) {
        reversedString += str[i];
      }
      console.log(`Reversed string ${reversedString}`);
    }, 2000);
  };

  // The input now only updates state
  return (
    <div>
      <input
        type="text"
        placeholder="type word"
        onChange={(e) => setMyValue(e.target.value)}
      />
    </div>
  );
}

export default Reduxy;

Leave a Comment