@amxchange/grid-view-web-client/src/modules/FormField/DisplayField.jsx

amxchange grid view framework web client in react ( a module extracted from existing jax )

import React from "react";
import MuiTextField from "@mui/material/TextField";

const DisplayField = React.forwardRef(
    ({ label, value, defaultValue, errorMsg, containerClass, InputProps, ...restProps }, ref) => {
        return (
            <div className={`input-field-sec ${errorMsg ? "error-field" : ""} ${containerClass || ""}`}>
                <MuiTextField
                    error={!!errorMsg}
                    inputRef={ref}
                    variant="outlined"
                    label={label}
                    value={value || defaultValue || ""}
                    InputProps={{
                        ...InputProps,
                        readOnly: true
                    }}
                    {...restProps}
                />
                {errorMsg && <span className="helperTextError">{errorMsg}</span>}
            </div>
        );
    }
);

export default DisplayField;