Input Handle Change-CodePudding

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"
          
        >
          Search
        </label>
        <div >
          <input
            type="search"
            id="in"
            value={inputValue}
            onChange={handleChange}
            
            placeholder="Search for domains..."
          />
        </div>
      </form>

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

CodePudding user response：

Here you have the code

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

Change this to

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

CodePudding user response：

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 : "");

  ...
};