trampa-frontend/src/components/TextFields/TextField/TextField.js

import React, { useEffect, useState } from "react";
import { TextFieldContainer, TextFieldStyled } from "./TextField.styled";
import PropTypes from "prop-types";

export const TextField = (props) => {
  const [isFieldEmpty, setIsFieldEmpty] = useState(true);

//  for italicPlaceholder
  useEffect(() => {
    if (props.value.length === 0) {
      setIsFieldEmpty(true);
    } else {
      setIsFieldEmpty(false);
    }
  }, [props.value]);

  return (
    <TextFieldContainer style={props.containerStyle} className={props.className}>
      <TextFieldStyled 
        placeholder={props.placeholder}
        width={props.width}
        height={props.height}
        name={props.name}
        value={props.value}
        onChange={props.onChange}
        error={props.error}
        // helperText={props.helperText}
        autoFocus={props.autoFocus}
        fullWidth={props.fullWidth}
        type={props.type}
        textsize={props.textsize}
        font={props.font}
        InputProps={props.InputProps}
        sx={props.style}
        label={props.showAnimation ? props.placeholder : ""}
        italic={props.italicPlaceholder && isFieldEmpty}
      >
        {props.children}
      </TextFieldStyled>
    </TextFieldContainer>
  );
};

TextField.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
  children: PropTypes.node,
  className: PropTypes.string,
  placeholder: PropTypes.string,
  style: PropTypes.any,
  showAnimation: PropTypes.bool,
  containerStyle: PropTypes.any,
  italicPlaceholder: PropTypes.bool,
  width: PropTypes.string,
  height: PropTypes.string,
  name: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onChange: PropTypes.func,
  error: PropTypes.bool,
  helperText: PropTypes.string,
  autoFocus: PropTypes.bool,
  fullWidth: PropTypes.bool,
  type: PropTypes.string,
  textsize: PropTypes.string,
  font: PropTypes.string,
  InputProps: PropTypes.shape({
    startAdornment: PropTypes.node,
    endAdornment: PropTypes.node,
    style: PropTypes.any,
  }),
};

TextField.defaultProps = {
  italicPlaceholder: false,
  showAnimation: false,
  // font: "Open Sans"
};