Quiero actualizar el texto que escriban los usuarios en el campo de entrada y luego unir ese texto con otro texto (es decir, ".com" en este ejemplo). Entonces, de alguna manera logré unirme a la extensión con el texto de entrada del usuario, pero cuando el campo de entrada está vacío, la extensión aún se muestra. ¿Alguien puede ayudarme a eliminar ese texto de extensión cuando el campo de entrada está vacío? Aquí está mi código
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} /> </> ); }Si está pasando tanto inputValue como inputExtension como accesorios para el componente Check , entonces debería ser trivial simplemente verificar la longitud de inputValue , es decir, usar el hecho de que las cadenas vacías son falsas y agregar condicionalmente el valor de extensión.
Ejemplo:
const value = ({ inputValue, inputExtension = ".com" }) => inputValue + (inputValue ? inputExtension : ""); console.log({ value: value({ inputValue: "" }) }); // "" console.log({ value: value({ inputValue: "someValue" })}); // "someValue.com"Código:
const Check = ({ inputValue = "", inputExtension = "" }) => { const value = inputValue + (inputValue ? inputExtension : ""); ... };aqui tienes el codigo
if (inputValue == inputValue) { setInputExtension(".com"); }cambiar esto a
if(inputValue.length > 0) { setInputExtension(".com"); }