Pomoc w uproszczeniu komponentu ReactJS

Question

Witam serdecznie, czy ktoś z forumowiczów mógłby pomóc mi uprościć i rozbić na mniejsze fragmenty komponent - tasiemiec. Jak to powinno wyglądać w prawdziwym życiu? 

mój komponent:

import React, { } from "react";

function RenderAttributes(
  {
    attributes,
    selectedAttributes,
    setSelectedAttributes,
  },
)
{
  const updateAttributes = (e, attribute) => setSelectedAttributes(
    { ...selectedAttributes, [attribute.name]: e.target.value },
  );
  console.log(selectedAttributes);
  return (
    <div className="product-details-info-attributes-container">
      {
          attributes.map((attribute) =>
          {
            if (attribute.name === "Color")
            {
              return (
                <div
                  className="product-details-info-attribute-container"
                  key={attribute.name}
                >
                  <h3 className="product-details-info-attribute-name">
                    {`${attribute.name.toUpperCase()}:`}
                  </h3>
                  <div className="product-details-info-attribute-values-container">
                    {
                      attribute.items.map((item) => (
                        <div
                          className="product-details-info-attribute-wrapper"
                          key={item.value}
                          style={
                            selectedAttributes[attribute.name] === item.id
                              ? { border: "4px solid rgb(94, 206, 123)", padding: "4px" } : {}
                          }
                        >
                          <label
                            className="product-details-info-attribute-color"
                            style={{ backgroundColor: item.value }}
                            htmlFor={item.id}
                          >
                            <input
                              type="radio"
                              value={item.id}
                              name="color"
                              id={item.id}
                              onChange={(e) => updateAttributes(e, attribute)}
                            />
                          </label>
                        </div>
                      ))
                    }
                  </div>
                </div>
              );
            }
            return (
              <div
                className="product-details-info-attribute-container"
                key={attribute.name}
              >
                <h3 className="product-details-info-attribute-name">
                  {`${attribute.name.toUpperCase()}:`}
                </h3>
                <div
                  className="
                    product-details-info-attribute-values-container
                    "
                >
                  {
                      attribute.items.map((item) => (
                        <label
                          className="product-details-info-attribute-value"
                          style={selectedAttributes[attribute.name] === item.id ? {
                            backgroundColor: "black",
                            color: "white",
                          } : {}}
                          htmlFor={item.id}
                          key={item.id}
                        >
                          <input
                            type="radio"
                            value={item.id}
                            name={attribute.name}
                            onChange={(e) => updateAttributes(e, attribute)}
                            id={item.id}
                          />
                          {item.displayValue}
                        </label>
                      ))
                  }
                </div>
              </div>
            );
          })
        }
    </div>
  );
}
export default RenderAttributes;

Dzięki za pomoc!

Comments

zdziwiłbyś się jak kod wygląda w prawdziwym życiu, tam dopiero jest syf