CODEWITHSUNDEEP
javascriptreactjsonchangereact-state
Rabyaan Khan
Rabyaan Khan

Reputation: 21

Input Handle Change

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} />
    </>
  );
}

Upvotes: 1

Views: 459

Answers (2)

Drew Reese
Drew Reese

Reputation: 203562

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

  ...
};

Upvotes: 1

Will 40
Will 40

Reputation: 341

Here you have the code

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

Change this to

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

Upvotes: 1

Related Questions