diff --git a/src/MyReactBuilder.js b/src/MyReactBuilder.js
new file mode 100644
index 0000000..8d265bf
--- /dev/null
+++ b/src/MyReactBuilder.js
@@ -0,0 +1,37 @@
+import myReact from "./myReact";
+
+export default class MyReactBuilder {
+    constructor(type = null) {
+        this.type = type;
+        this.props = {};
+        this.children = [];
+        this.styleID = null;
+        this.myTailwindFSPath = "./myTailwind.json";
+    }
+
+    setType = (type) => {
+        this.type = type;
+        return this;
+    };
+    setProps = (props) => {
+        this.props = props;
+        return this;
+    };
+    setChildren = (children) => {
+        this.children = children;
+        return this;
+    };
+    setStyleID = (styleID) => {
+        this.styleID = styleID;
+        return this;
+    };
+    build = () => {
+        return new myReact(
+            this.type,
+            this.props,
+            this.children,
+            this.styleID,
+            this.myTailwindFSPath,
+        );
+    };
+}
diff --git a/src/index.js b/src/index.js
index 558a31d..9e96047 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,106 +1,134 @@
 const dataFilePath = "./data.json";
 import myReact from "./myReact";
+import MyReactBuilder from "./MyReactBuilder";
 fetch(dataFilePath)
-  .then((response) => response.json())
-  .then((response) => {
-    let localData = response.personnes;
-    let inputSearch = new myReact(
-      "input",
-      {
-        type: "text",
-        placeholder: "search",
-        onkeyup: (e) => buildTable(searchData(e.target.value, localData)),
-      },
-      [],
-      9
-    ).render();
-    document.body.appendChild(inputSearch);
-    buildTable(localData);
-    // nextWork();
-  });
+    .then((response) => response.json())
+    .then((response) => {
+        let localData = response.personnes;
+
+        // let inputSearch = new myReact(
+        //     "input",
+        //     {
+        //         type: "text",
+        //         placeholder: "search",
+        //         onkeyup: (e) =>
+        //             buildTable(searchData(e.target.value, localData)),
+        //     },
+        //     [],
+        //     9,
+        // ).render();
+
+        ////////////////////////////////////////
+
+        let inputSearch = new MyReactBuilder("input")
+            .setProps({
+                // add props
+                type: "text",
+                placeholder: "search",
+                onkeyup: (e) =>
+                    buildTable(searchData(e.target.value, localData)),
+            })
+            .setChildren([]) // add children
+            .setStyleID(9) // add styleId
+            .build() // return the myReact instance
+            .render(); // execute render method
+
+        document.body.appendChild(inputSearch);
+        buildTable(localData);
+        // nextWork();
+    });
 const searchData = (query, data) =>
-  data.filter((element) =>
-    Object.values(element).some((value) => value.toString().includes(query))
-  );
+    data.filter((element) =>
+        Object.values(element).some((value) =>
+            value.toString().includes(query),
+        ),
+    );
 const sortData = (field, data, desc = false) =>
-  buildTable(
-    data.sort((a, b) =>
-      desc ? (a[field] > b[field] ? 1 : -1) : b[field] > a[field] ? 1 : -1
-    )
-  );
+    buildTable(
+        data.sort((a, b) =>
+            desc
+                ? a[field] > b[field]
+                    ? 1
+                    : -1
+                : b[field] > a[field]
+                ? 1
+                : -1,
+        ),
+    );
 const buildTable = (data) => {
-  // let formSearch = new myReact("form", {}, )
+    // let formSearch = new myReact("form", {}, )
 
-  const exist = document.querySelector("table");
-  exist && exist.remove();
-  let tdListdata = Object.keys(data[0]).map(
-    (key) =>
-      new myReact(
-        "th",
-        {},
-        [
-          key,
-          new myReact(
-            "button",
-            { onclick: () => sortData(key, data, true) },
-            ["^"],
-            6
-          ),
-          new myReact(
-            "button",
-            { onclick: () => sortData(key, data) },
-            ["v"],
-            6
-          ),
-        ],
-        2
-      )
-  );
+    const exist = document.querySelector("table");
+    exist && exist.remove();
+    let tdListdata = Object.keys(data[0]).map(
+        (key) =>
+            new myReact(
+                "th",
+                {},
+                [
+                    key,
+                    new myReact(
+                        "button",
+                        { onclick: () => sortData(key, data, true) },
+                        ["^"],
+                        6,
+                    ),
+                    new myReact(
+                        "button",
+                        { onclick: () => sortData(key, data) },
+                        ["v"],
+                        6,
+                    ),
+                ],
+                2,
+            ),
+    );
 
-  let tabledata = new myReact(
-    "table",
-    {},
-    [
-      new myReact("thead", {}, [new myReact("tr", {}, tdListdata, 4)], 3),
-      new myReact(
-        "tbody",
+    let tabledata = new myReact(
+        "table",
         {},
-        data.map(
-          (persone) =>
+        [
+            new myReact("thead", {}, [new myReact("tr", {}, tdListdata, 4)], 3),
             new myReact(
-              "tr",
-              {},
-              Object.keys(persone).map(
-                (key) => new myReact("td", {}, [persone[key]], 5)
-              ),
-              4
-            )
-        ),
-        10
-      ),
-    ],
-    1
-  );
+                "tbody",
+                {},
+                data.map(
+                    (persone) =>
+                        new myReact(
+                            "tr",
+                            {},
+                            Object.keys(persone).map(
+                                (key) =>
+                                    new myReact("td", {}, [persone[key]], 5),
+                            ),
+                            4,
+                        ),
+                ),
+                10,
+            ),
+        ],
+        1,
+    );
 
-  document.body.appendChild(tabledata.render());
+    document.body.appendChild(tabledata.render());
 };
 
 function nextWork() {
-  const helloWord = () => {
-    alert("hello word");
-  };
-  const btn = new myReact("button", { onclick: helloWord }, ["Search"], 6);
-  document.body.appendChild(btn.render());
-  const btn2 = new myReact("button", { onclick: helloWord }, ["button 2"], 6);
-  document.body.appendChild(btn2.render());
-  const h1 = new myReact("h1", { onclick: helloWord }, ["title"], 8);
-  document.body.appendChild(h1.render());
+    const helloWord = () => {
+        alert("hello word");
+    };
+    const btn = new myReact("button", { onclick: helloWord }, ["Search"], 6);
+    document.body.appendChild(btn.render());
+    const btn2 = new myReact("button", { onclick: helloWord }, ["button 2"], 6);
+    document.body.appendChild(btn2.render());
+    const h1 = new myReact("h1", { onclick: helloWord }, ["title"], 8);
+    document.body.appendChild(h1.render());
 
-  const section = new myReact("section", {}, [
-    new myReact("h4", { style: "color:green" }, ["Hello World"]),
-  ]);
-  document.body.appendChild(section.render());
+    const section = new myReact("section", {}, [
+        new myReact("h4", { style: "color:green" }, ["Hello World"]),
+    ]);
+    document.body.appendChild(section.render());
 
-  const ul = new myReact("ul", {}, [new myReact("li", {}, ["item1"])], 8);
-  document.body.appendChild(ul.render());
+    const ul = new myReact("ul", {}, [new myReact("li", {}, ["item1"])], 8);
+    document.body.appendChild(ul.render());
 }
diff --git a/src/myReact.js b/src/myReact.js
index b266db6..39f06b3 100644
--- a/src/myReact.js
+++ b/src/myReact.js
@@ -1,37 +1,37 @@
 export default class myReact {
-  constructor(type, props, children, styleID = null) {
-    this.type = type;
-    this.props = props;
-    this.children = children;
-    this.styleID = styleID;
-    this.myTailwindFSPath="./myTailwind.json"
-  }
-  render() {
-    const element = document.createElement(this.type);
-
-    for (const prop in this.props) {
-      element[prop] = this.props[prop];
+    constructor(type, props, children, styleID = null) {
+        this.type = type;
+        this.props = props;
+        this.children = children;
+        this.styleID = styleID;
+        this.myTailwindFSPath = "./myTailwind.json";
     }
+    render() {
+        const element = document.createElement(this.type);
 
-    if (this.styleID) {
-      fetch(this.myTailwindFSPath)
-        .then((response) => response.json())
-        .then((response) => {
-          const theStyle = response.allStyles.find(
-            (style) => style.id == parseInt(this.styleID)
-          );
-          theStyle && (element.className += theStyle.class);
-        });
-    }
+        for (const prop in this.props) {
+            element[prop] = this.props[prop];
+        }
 
-    for (const child of this.children) {
-      if (!(child instanceof myReact)) {
-        element.innerHTML += child;
-      } else {
-        element.appendChild(child.render());
-      }
-    }
+        if (this.styleID) {
+            fetch(this.myTailwindFSPath)
+                .then((response) => response.json())
+                .then((response) => {
+                    const theStyle = response.allStyles.find(
+                        (style) => style.id == parseInt(this.styleID),
+                    );
+                    theStyle && (element.className += " " + theStyle.class);
+                });
+        }
 
-    return element;
-  }
+        for (const child of this.children) {
+            if (!(child instanceof myReact)) {
+                element.innerHTML += child;
+            } else {
+                element.appendChild(child.render());
+            }
+        }
+
+        return element;
+    }
 }