Input Handle Change

Question

I want to update the text whatever users types in the input field and then join that text with another text (i.e ".com" in this example). So somehow I managed to join the extension with the user's input text but when the input field is empty the extension is still showing. Can someone help me to remove that extension text when the input field is empty? Here's my code

import React, { useState } from "react";
import Check from "./Check";

export default function App() {
  const [inputValue, setInputValue] = useState("");
  const [inputExtension, setInputExtension] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
    if (setInputValue == inputValue) {
      setInputExtension(inputExtension);
    }
    if (inputValue == inputValue) {
      setInputExtension(".com");
    }
  };

  return (
    <>
      <h1 className="text-[2.1rem] font-semibold text-black">
        Find Your Perfect Domain
      </h1>
      <form>
        <label
          for="default-search"
          class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
        >
          Search
        </label>
        <div class="relative">
          <input
            type="search"
            id="in"
            value={inputValue}
            onChange={handleChange}
            class="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
            placeholder="Search for domains..."
          />
        </div>
      </form>

      <Check domain={inputValue} extension={inputExtension} />
      <Check domain={inputValue} extension={inputExtension} />
    </>
  );
}

react states are not immediality update . you compare void and string with `if (setInputValue == inputValue)`, this is meaningless. — Okan Karadag, Aug 21 '22 at 00:34

score 1 · Answer 1 · answered Aug 20 '22 at 22:58

1

Here you have the code

if (inputValue == inputValue) {
      setInputExtension(".com");
 }

Change this to

if(inputValue.length > 0) {
    setInputExtension(".com");
}

answered Aug 20 '22 at 22:58

Will 40

186
5

It's not working – Rabyaan Khan Aug 20 '22 at 23:12
what are you trying to accomplish? is it just trying to add ".com" to the end of the input? Also what does your "Check" component look like? – Will 40 Aug 20 '22 at 23:58

score 1 · Answer 2 · answered Aug 21 '22 at 05:30

If you are passing both inputValue and inputExtension as props to the Check component then it should be trivial to just check the inputValue length, i.e. use the fact that empty strings are falsey, and conditionally append the extension value.

Example:

const value = ({
  inputValue,
  inputExtension = ".com"
}) => inputValue + (inputValue ? inputExtension : "");

console.log({ value: value({ inputValue: "" }) });         // ""
console.log({ value: value({ inputValue: "someValue" })}); // "someValue.com"

Code:

const Check = ({ inputValue = "", inputExtension = "" }) => {
  const value = inputValue + (inputValue ? inputExtension : "");

  ...
};

Input Handle Change

2 Answers2