How do i create dynamic product variant options on React

Question

I am creating a ecommerce project to learn react, and i guess thats the best way to learn a language by doing a complex project so that you get to know every aspect of it. but now i am stuck with something that i searched for everywhere but couldnt find.

Basically i want to create a section where the person can add product variants like color and sizes to it, like the example below

it doesnt have to be complicated but if i could add into an object depending on the values the user inputs is what all i need.

if someone could help me that would be great! Thank you!!!

Answer 1

I think I have done similar project.

Flow was as follows:

const [words, setWords] = useState([]);

...

function handleWord(e) {
    if (e.key === "Enter") {
      let temp = words ? words : [];
      temp.push(value);
      setWords(temp);
      setValue("");
    }
  }

...

<input
          type="text"
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={handleWord}
          value={value}
          placeholder="Enter one keyword..."
/>

You can modify this depending on how you are constructing object.

Is that what you want?

Answer 2

Adding Variants of products in a catalogue

• Variants of a product are the products having different attributes.

Implementation

• To implement this feature you need 3 things

1. you need to know all the unique hinges with their priority (Set of all unique possible attributes of a product in catalogue) eg here in you case hinges are

[{id:110, hingeName : "Color", priority: 1 }, {id:220, hingeName: "Size", priority:2}]

2. You need to know the attribute of the current product which is on screen

productData = { 
    id:12132, 
    prodcutImg:'https://abc.img.in', 
    productPrice:'$24', 
    prodAttribute:[{id:110, value:'Black'},{id:220, value:"XL"}],
    variantMeta:
     {
        hinges:[
                  {id:110, hingeName : "Color", priority: 1 }, 
                  {id:220, hingeName: "Size", priority:2}
              ],
        hingesValues: [ 
                       {110: ["Black","Red","White"]},                                   
                       {220: ['XS','S','L','XL','XXL']}
                      ],
        variantsOfCurrentProducts: [
                                     {variant_id:'12131', attributes: { 110:'Black',220:'S'}},
                                     {variant_id:'12132', attributes: { 110:'Red',220:'XL'}},
                                     {variant_id:'12133', attributes: { 110:'White',220:'XS'}},
                                     {variant_id:'12134', attributes: { 110:'Red',220:'XL'}}
                                    ]
      }
}]

• Now you need to render all the hinges as title and hinge values as values of those hinges.
• Let's suppose you want to render the variants in ascending order of priority
• So now your UI for the given example will look similar to the following:

Color :
        Red Black White
Size :
        XS S L XL XXL

• Now you should show current products attributes as selected in hinges as

Color :
        Red "Black" White
Size :
        XS S L "XL" XXL

NOTE: I have used "double_quote" for showing the attribute of current product. You can render it with different background and colour on UI.

• Now make sure that hinge at the top most priority should always be enabled so that user can be able to select that at any point of time

• If someone click on the hinge having 2nd highest priority then filter all those variants which have attribute with highest priority and the 2nd highest priority and render them as selectable values and all those variants which don't have these attributes disable them.