title: how to draw configurable products in react by its attribute code?
body: <p>for 3 days now I have been trying to write a universal code that will allow us to select some options, for example, shirts by their size, color, material, etc., so that if there is no such option, then this button is disabled, but half works.
  Who can help me, maybe advice or something??
  here is my code below.</p>
  <pre><code>function ConfigurableFilters ({ handleChangeConfig, configurablesData, state }) {
  
    const isDisabled = (e, code) =&gt; {
      let products = [...e.products];
      for(let attr of configurablesData.attributes) {
        if(attr.code === code) {
          break
        }
        products = products.filter(prod =&gt; state.selectedConfigs[attr.code].products.includes(prod))
         state.selectedConfigs[attr.code].id)
      }
      return !products.length
    }
  
  
    return (
      &lt;div className=&quot;configurable-attributes&quot;&gt;
        {
          configurablesData.attributes.map((attr) =&gt; {
            if (attr.options.length &gt; 1) {
              if (attr.code !== 'color') {
                return (
                  &lt;div className=&quot;attr_fms attr_space&quot;&gt;
                    &lt;div className=&quot;attr_label_size&quot;&gt;{attr.label}&lt;/div&gt;
                    {
                      attr.code !== 'color'
                      &amp;&amp; attr.options.length &gt; 0
                      &amp;&amp; !attr.options[0].swatch_value
                      &amp;&amp; (
                        &lt;div className=&quot;other-list-main-fms&quot;&gt;
                          {attr.options.map((e, i) =&gt; {
                            return (
                              &lt;label
                                htmlFor={attr.code + e.id}
                                key={i}
                                id={e.id + attr.code}
                              &gt;
                              &lt;span className=&quot;other-list__input&quot;&gt;
                                &lt;span className=&quot;other-radio__body&quot;&gt;
                                  &lt;input
                                    id={attr.code + e.id}
                                    className=&quot;other-radio__input&quot;
                                    type=&quot;radio&quot;
                                    name={attr.code}
                                    value={e.id}
                                    checked={state.selectedConfigs[attr.code].id === e.id}
                                    onChange={() =&gt; {
                                      handleChangeConfig(
                                        e.products,
                                        attr.id,
                                        attr.code,
                                        e,
                                      )
                                    }}
                                    disabled={isDisabled(e, attr.code)}
                                  /&gt;
                                &lt;/span&gt;
                              &lt;/span&gt;
                                &lt;span className=&quot;other-list__title&quot;&gt;
                                {e.label}
                              &lt;/span&gt;
                              &lt;/label&gt;
                            )
                          })}
                        &lt;/div&gt;
                      )}
                  &lt;/div&gt;
                )
              } else {
                return (
                  &lt;div className=&quot;attr_color_fms attr_space&quot;&gt;
                    &lt;div className=&quot;attr_label_size&quot;&gt;{attr.label}&lt;/div&gt;
                    {
                      attr.options
                      &amp;&amp; attr.options.length &gt; 1
                      &amp;&amp; (
                        &lt;div className=&quot;color-attr_fm&quot;&gt;
                          {
                            attr.options.map((e, i) =&gt; {
                              return (
                                &lt;div
                                  key={i}
                                  className=&quot;filter-color__item&quot;
                                  id={e.id + attr.code}
                                &gt;
                            &lt;span
                              className={classNames(
                                'filter-color__check input-check-color',
                                {
                                  'input-check-color--white':
                                    colorType(e.swatch_value) === 'white',
                                  'input-check-color--light':
                                    colorType(e.swatch_value) === 'light',
                                },
                              )}
                              style={{ color: `${e.label}`.toLowerCase() }}
                            &gt;
                              &lt;label className=&quot;input-check-color__body&quot;&gt;
                                &lt;input
                                  id={attr.code + e.id}
                                  className=&quot;input-check-color__input&quot;
                                  name={attr.code}
                                  type=&quot;radio&quot;
                                  value={e.id}
                                  checked={state.selectedConfigs[attr.code].id === e.id}
                                  onChange={() =&gt; {
                                    handleChangeConfig(
                                      e.products,
                                      attr.id,
                                      attr.code,
                                      e,
                                    )
                                  }}
                                  disabled={isDisabled(e, attr.code)}
                                /&gt;
                                &lt;span className=&quot;input-check-color__box&quot;/&gt;
                                &lt;Check12x9Svg className=&quot;input-check-color__icon&quot;/&gt;
                                &lt;span className=&quot;input-check-color__stick&quot;/&gt;
                              &lt;/label&gt;
                            &lt;/span&gt;
                                &lt;/div&gt;
                              )
                            })
                          }
                        &lt;/div&gt;
                      )
                    }
                  &lt;/div&gt;
                )
              }
            }
          })
        }
      &lt;/div&gt;
    )
  }
  
  
  export default ConfigurableFilters
  
  </code></pre>
  <p>here is my example screenshot</p>
  <p><a href="https://i.stack.imgur.com/4gIkL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4gIkL.png" alt="this is my standard case" /></a></p>
  <p><a href="https://i.stack.imgur.com/WA2Rn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WA2Rn.png" alt="I want to get something like this for each combination, in this situation I dont have &lt;50 &amp; &lt;100, so they are disabled, but it works with bugs, not always works for other products" /></a></p>
  <p>In this product it is not working... I don't have &quot;M&quot; size, but it is enabled</p>
  <p><a href="https://i.stack.imgur.com/J403B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J403B.png" alt="&quot;M&quot; size must be disabled but it is active" /></a></p>
  <p>Any suggestions or ideas??</p>
  <p>and this is my configurableData</p>
  <pre><code>{
    &quot;attributes&quot;: [
      {
        &quot;id&quot;: 23,
        &quot;code&quot;: &quot;color&quot;,
        &quot;label&quot;: &quot;Color&quot;,
        &quot;options&quot;: [
          {
            &quot;_id&quot;: &quot;6215cd906648a738081c765b&quot;,
            &quot;id&quot;: 1,
            &quot;admin_name&quot;: &quot;Red&quot;,
            &quot;attribute_id&quot;: 23,
            &quot;sort_order&quot;: 1,
            &quot;label&quot;: &quot;Red&quot;,
            &quot;translations&quot;: [
              {
                &quot;locale&quot;: &quot;en&quot;,
                &quot;name&quot;: null
              },
              {
                &quot;locale&quot;: &quot;ru&quot;,
                &quot;name&quot;: null
              }
            ],
            &quot;products&quot;: [
              119,
              123,
              125
            ]
          },
          {
            &quot;_id&quot;: &quot;6215cd906648a738081c765c&quot;,
            &quot;id&quot;: 2,
            &quot;admin_name&quot;: &quot;Green&quot;,
            &quot;attribute_id&quot;: 23,
            &quot;sort_order&quot;: 2,
            &quot;label&quot;: &quot;Green&quot;,
            &quot;translations&quot;: [
              {
                &quot;locale&quot;: &quot;en&quot;,
                &quot;name&quot;: null
              },
              {
                &quot;locale&quot;: &quot;ru&quot;,
                &quot;name&quot;: null
              }
            ],
            &quot;products&quot;: [
              120,
              122,
              124,
              126
            ]
          }
        ],
        &quot;swatch_type&quot;: null,
        &quot;product_id&quot;: 118
      },
      {
        &quot;id&quot;: 24,
        &quot;code&quot;: &quot;size&quot;,
        &quot;label&quot;: &quot;Size&quot;,
        &quot;options&quot;: [
          {
            &quot;_id&quot;: &quot;6215cd906648a738081c7660&quot;,
            &quot;id&quot;: 6,
            &quot;admin_name&quot;: &quot;S&quot;,
            &quot;attribute_id&quot;: 24,
            &quot;sort_order&quot;: 1,
            &quot;label&quot;: &quot;S&quot;,
            &quot;translations&quot;: [
              {
                &quot;locale&quot;: &quot;en&quot;,
                &quot;name&quot;: null
              }
            ],
            &quot;products&quot;: [
              119,
              120,
              123,
              124
            ]
          },
          {
            &quot;_id&quot;: &quot;6215cd906648a738081c7661&quot;,
            &quot;id&quot;: 7,
            &quot;admin_name&quot;: &quot;M&quot;,
            &quot;attribute_id&quot;: 24,
            &quot;sort_order&quot;: 2,
            &quot;label&quot;: &quot;M&quot;,
            &quot;translations&quot;: [
              {
                &quot;locale&quot;: &quot;en&quot;,
                &quot;name&quot;: null
              }
            ],
            &quot;products&quot;: [
              122,
              125,
              126
            ]
          }
        ],
        &quot;swatch_type&quot;: null,
        &quot;product_id&quot;: 118
      },
      {
        &quot;id&quot;: 29,
        &quot;code&quot;: &quot;Papertype&quot;,
        &quot;label&quot;: &quot;Paper type&quot;,
        &quot;options&quot;: [
          {
            &quot;_id&quot;: &quot;6215cd906648a738081c7669&quot;,
            &quot;id&quot;: 15,
            &quot;admin_name&quot;: &quot;Type 1&quot;,
            &quot;attribute_id&quot;: 29,
            &quot;sort_order&quot;: 1,
            &quot;label&quot;: &quot;Type 1&quot;,
            &quot;translations&quot;: [
              {
                &quot;locale&quot;: &quot;en&quot;,
                &quot;name&quot;: null
              }
            ],
            &quot;products&quot;: [
              119,
              120,
              122
            ]
          },
          {
            &quot;_id&quot;: &quot;6215cd906648a738081c766a&quot;,
            &quot;id&quot;: 16,
            &quot;admin_name&quot;: &quot;Type 2&quot;,
            &quot;attribute_id&quot;: 29,
            &quot;sort_order&quot;: 2,
            &quot;label&quot;: &quot;Type 2&quot;,
            &quot;translations&quot;: [
              {
                &quot;locale&quot;: &quot;en&quot;,
                &quot;name&quot;: null
              }
            ],
            &quot;products&quot;: [
              123,
              124,
              125,
              126
            ]
          }
        ],
        &quot;swatch_type&quot;: null,
        &quot;product_id&quot;: 118
      }
    ],
    &quot;chooseText&quot;: &quot;Choose an option&quot;,
    &quot;index&quot;: {
      &quot;119&quot;: {
        &quot;23&quot;: &quot;1&quot;,
        &quot;24&quot;: &quot;6&quot;,
        &quot;29&quot;: &quot;15&quot;
      },
      &quot;120&quot;: {
        &quot;23&quot;: &quot;2&quot;,
        &quot;24&quot;: &quot;6&quot;,
        &quot;29&quot;: &quot;15&quot;
      },
      &quot;122&quot;: {
        &quot;23&quot;: &quot;2&quot;,
        &quot;24&quot;: &quot;7&quot;,
        &quot;29&quot;: &quot;15&quot;
      },
      &quot;123&quot;: {
        &quot;23&quot;: &quot;1&quot;,
        &quot;24&quot;: &quot;6&quot;,
        &quot;29&quot;: &quot;16&quot;
      },
      &quot;124&quot;: {
        &quot;23&quot;: &quot;2&quot;,
        &quot;24&quot;: &quot;6&quot;,
        &quot;29&quot;: &quot;16&quot;
      },
      &quot;125&quot;: {
        &quot;23&quot;: &quot;1&quot;,
        &quot;24&quot;: &quot;7&quot;,
        &quot;29&quot;: &quot;16&quot;
      },
      &quot;126&quot;: {
        &quot;23&quot;: &quot;2&quot;,
        &quot;24&quot;: &quot;7&quot;,
        &quot;29&quot;: &quot;16&quot;
      }
    }
  }
  </code></pre>