challenge-vtex-io-andrea-ma.../react/components/Freight/Freight.tsx

37 lines
1.0 KiB
TypeScript

import React, { useEffect } from "react";
const Freight = () => {
const setPlaceholder = (input: Element | null, placeholder: string) => {
if (input) {
input!.setAttribute("placeholder", placeholder);
}
};
const appendElement = (
parentElement: ChildNode | null | undefined,
childElement: ChildNode | null | undefined
) => {
if (parentElement && childElement) {
parentElement!.appendChild(childElement);
}
};
useEffect(() => {
const cepInput = document.querySelector(".vtex-address-form-4-x-input");
const inputSpan = cepInput?.nextSibling;
const cepButton = document.querySelector(".vtex-address-form__postalCode")
?.nextSibling;
console.log("cepInput: " + cepInput, typeof cepInput);
console.log("inputSpan: " + inputSpan, typeof inputSpan);
console.log("cepButton: " + cepButton, typeof cepButton);
setPlaceholder(cepInput, "Digite seu CEP");
appendElement(inputSpan, cepButton);
});
return <></>;
};
export default Freight;