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} />
</>
);
}
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 : "");
...
};
Here you have the code
if (inputValue == inputValue) {
setInputExtension(".com");
}
Change this to
if(inputValue.length > 0) {
setInputExtension(".com");
}