cosmo-task1's Introduction

Task

Create such component
It should be able to render this interface if given in some data form.
User should be able to edit name of a field
User should be able to add more fields
User should be able to delete a field
Users should be able to add nested fields to object type.
There should be a save button which console the updated data.(trying to display as javascript object , little bit diffcult , if fails i will display the state directly)

Extra feature

exit the edit mode of input using enter or esc key

Nested object

Data schema

[key:  string]: {

type:  typesOfData;

required:  boolean;

name:  string;

childIds:  string[];

parentId:  string;

};

Example

{
  1681890656946: {
    type: "string",
    required: false,
    childIds: [],
    name: "name",
    parentId: ""
  },
  1681890657595: {
    type: "number",
    required: false,
    childIds: [],
    name: "phone",
    parentId: ""
  },
  1681890680445: {
    type: "object",
    required: false,
    childIds: ["1681890689801", "1681890690236", "1681890690454"],
    name: "address",
    parentId: ""
  },
  1681890689801: {
    type: "number",
    required: false,
    childIds: [],
    name: "lane_no",
    parentId: "1681890680445"
  },
  1681890690236: {
    type: "string",
    required: false,
    childIds: [],
    name: "street_name",
    parentId: "1681890680445"
  },
  1681890690454: {
    type: "string",
    required: false,
    childIds: [],
    name: "colony\\",
    parentId: "1681890680445"
  }
};

Recommend Projects