diff --git a/example/src/post.tsx b/example/src/post.tsx
index 00cde4ebe46c..7a27d18dad9d 100644
--- a/example/src/post.tsx
+++ b/example/src/post.tsx
@@ -12,6 +12,7 @@ import {
     SelectInput,
     ReferenceInput,
     ReferenceField,
+    TextField,
 } from "readmin";
 
 export const PostList = (props: any) => {
@@ -26,11 +27,9 @@ export const PostList = (props: any) => {
                     dataIndex="categoryId"
                     render={(value) => {
                         return (
-                            <ReferenceField
-                                value={value}
-                                resource="categories"
-                                optionText="title"
-                            />
+                            <ReferenceField value={value} resource="categories">
+                                <TextField source="title" />
+                            </ReferenceField>
                         );
                     }}
                 />
diff --git a/src/components/index.ts b/src/components/index.ts
index d9797f52ea86..89cce6c1e890 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,6 +3,7 @@ export { List } from "./list";
 export { Table } from "./table";
 export { Column } from "./column";
 export { ReferenceField } from "./referenceField";
+export { TextField } from "./textField";
 export { Create } from "./create";
 export { Edit } from "./edit";
 export { Form, FormItem } from "./form";
diff --git a/src/components/referenceField/index.tsx b/src/components/referenceField/index.tsx
index 78c5c133b0dd..07cb16766846 100644
--- a/src/components/referenceField/index.tsx
+++ b/src/components/referenceField/index.tsx
@@ -6,15 +6,13 @@ import { GetOneResponse, IDataContext } from "@interfaces";
 
 export interface ReferenceFieldProps {
     resource: string;
-    optionText?: string;
     value: string | number;
-    record?: any;
 }
 
 export const ReferenceField: React.FC<ReferenceFieldProps> = ({
     resource,
-    optionText = "title",
     value,
+    children,
 }) => {
     const { getOne } = useContext<IDataContext>(DataContext);
 
@@ -28,5 +26,14 @@ export const ReferenceField: React.FC<ReferenceFieldProps> = ({
         return <span>loading</span>;
     }
 
-    return <span>{data?.data[optionText]}</span>;
+    const childrenWithProps = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                record: data?.data,
+            });
+        }
+        return child;
+    });
+
+    return <React.Fragment>{childrenWithProps}</React.Fragment>;
 };
diff --git a/src/components/textField/index.tsx b/src/components/textField/index.tsx
new file mode 100644
index 000000000000..b2f8eac53f27
--- /dev/null
+++ b/src/components/textField/index.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+export interface TextFieldProps {
+    record?: any;
+    source: string;
+}
+
+export const TextField: React.FC<TextFieldProps> = ({ record, source }) => {
+    return <span>{record[source]}</span>;
+};
diff --git a/src/index.tsx b/src/index.tsx
index 14ac756adb60..ff8cfb3d23a1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -18,6 +18,7 @@ export {
     RadioGroupInput,
     AutoCompleteInput,
     ReferenceInput,
+    TextField,
 } from "./components";
 
 export { IAuthContext as AuthProvider, Sort, Pagination } from "./interfaces";