Trying lessening the amount of functions i need to

Question

I am trying to set the state of size chosen with a function but i have 20 sizes and do not want to repeat a function 20 times is there a way to lessen the code? Is there a way to check and see if the state change matches the props clicked on? 1 when they click the button set the state to the props of the element clicked using one function.

If you want to look at the full code https://github.com/CodingOni/Ecommerce-Store

Example of Data

{
    id: 6.97,
    title: "Adidas Yeezy Boost 350 V2 Glow",
    img: "img/product-6.97.png",
    img2: "img/product-6.97-1.png",
    img3: "img/product-6.97-2.png",
    img4: "img/product-6.97-3.png",
    price: 800,
    info: "Adidas Yeezy Boost 350 V2 Glow",
    inCart: false,
    count: 0,
    total: 0,
    size1: "4",
    size2: "4.5",
    size3: "5",
    size4: "5.5",
    size5: "6",
    size6: "6.5",
    size7: "7",
    size8: "7.5",
    size9: "8",
    size10: "8.5",
    size11: "9",
    size12: "9.5",
    size13: "10",
    size14: "10.5",
    size15: "11",
    size16: "11.5",
    size17: "12",
    size18: "12.5",
    size19: "13",
    size20: "13.5",
    size21: "14",
    size22: "14.5",
    size23: "16",
    size24: "17",
    luxury:
      "All Luxuryitems are inspected to verify authenticity (Sizes above 14 may cost more)",
    category: "Mens Shoes"
  },

Drop Down Menu

import React from 'react';
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from 'reactstrap';

export default class DropDown extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false,
      choice: 'null'
    };
  }


  toggle() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }

  render() {
    return (
      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle className="bg-info" caret>
          {this.props.title}
        </DropdownToggle>
        <DropdownMenu className="bg-info">
          <DropdownItem className="bg-info" header>
            {this.props.special}
          </DropdownItem>
          {this.props.size && (
            <DropdownItem
              onClick={() => {
                this.setState({ choice: this.props.size });
              }}
              className="bg-info"
            >
              {this.props.size}
            </DropdownItem>
          )}
          {this.props.size1 && (
            <DropdownItem className="bg-info">{this.props.size1}</DropdownItem>
          )}
          {this.props.size2 && (
            <DropdownItem className="bg-info">{this.props.size2}</DropdownItem>
          )}
          {this.props.size3 && (
            <DropdownItem className="bg-info">{this.props.size3}</DropdownItem>
          )}
          {this.props.size4 && (
            <DropdownItem className="bg-info">{this.props.size4}</DropdownItem>
          )}
          {this.props.size5 && (
            <DropdownItem className="bg-info">{this.props.size5}</DropdownItem>
          )}
          {this.props.size6 && (
            <DropdownItem className="bg-info">{this.props.size6}</DropdownItem>
          )}
          {this.props.size7 && (
            <DropdownItem className="bg-info">{this.props.size7}</DropdownItem>
          )}
          {this.props.size8 && (
            <DropdownItem className="bg-info">{this.props.size8}</DropdownItem>
          )}
          {this.props.size9 && (
            <DropdownItem className="bg-info">{this.props.size9}</DropdownItem>
          )}
          {this.props.size10 && (
            <DropdownItem className="bg-info">{this.props.size10}</DropdownItem>
          )}
          {this.props.size11 && (
            <DropdownItem className="bg-info">{this.props.size11}</DropdownItem>
          )}
          {this.props.size12 && (
            <DropdownItem className="bg-info">{this.props.size12}</DropdownItem>
          )}
          {this.props.size13 && (
            <DropdownItem className="bg-info">{this.props.size13}</DropdownItem>
          )}
          {this.props.size14 && (
            <DropdownItem className="bg-info">{this.props.size14}</DropdownItem>
          )}
          {this.props.size15 && (
            <DropdownItem className="bg-info">{this.props.size15}</DropdownItem>
          )}
          {this.props.size16 && (
            <DropdownItem className="bg-info">{this.props.size16}</DropdownItem>
          )}
          {this.props.size17 && (
            <DropdownItem className="bg-info">{this.props.size17}</DropdownItem>
          )}
          {this.props.size18 && (
            <DropdownItem className="bg-info">{this.props.size18}</DropdownItem>
          )}
          {this.props.size19 && (
            <DropdownItem className="bg-info">{this.props.size19}</DropdownItem>
          )}
          {this.props.size20 && (
            <DropdownItem className="bg-info">{this.props.size20}</DropdownItem>
          )}
          {this.props.size21 && (
            <DropdownItem className="bg-info">{this.props.size21}</DropdownItem>
          )}
          {this.props.size22 && (
            <DropdownItem className="bg-info">{this.props.size22}</DropdownItem>
          )}
          {this.props.size23 && (
            <DropdownItem className="bg-info">{this.props.size23}</DropdownItem>
          )}
          {this.props.size24 && (
            <DropdownItem className="bg-info">{this.props.size25}</DropdownItem>
          )}
          {this.props.size9 && (
            <DropdownItem className="bg-info">{this.props.size25}</DropdownItem>
          )}
        </DropdownMenu>
      </Dropdown>
    );
  }
}



Dropdown Menus Parent

import React, { Component } from "react";
import { ProductConsumer } from "../context";
import { Link } from "react-router-dom";
import { ButtonContainer } from "./Button";
import DropDown from "./Dropdown";
import ItemCategory from "./ItemCategory";
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { AwesomeButton } from "react-awesome-button";

export default class Details extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false,

    };
  }


  toggle() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }
  render() {
    return (
      <ProductConsumer>
        {value => {
          const {
            id,
            img,
            img2,
            img3,
            img4,
            info,
            price,
            title,
            inCart,
            size1,
            size2,
            size3,
            size4,
            size5,
            size6,
            size7,
            size8,
            size9,
            size10,
            size11,
            size12,
            size13,
            size14,
            size15,
            size16,
            size17,
            size18,
            size19,
            size20,
            size21,
            size22,
            luxury,
            special,
            category,
            fabric
          } = value.detailProduct;
          return (
            <div className="container-fluid width-100 bg-white py-5 mt-5 ">
              {/* ProductInfo */}
              <div className="row">
                <div className="col mx-auto col-md-6 my-3 ">
                  <Carousel autoPlay>
                    <div>
                      <img src={img} className="img-fluid" alt="product" />
                    </div>
                    <div>
                      <img src={img2} className="img-fluid" alt="product" />
                    </div>
                    <div>
                      <img src={img3} className="img-fluid" alt="product" />
                    </div>
                    <div>
                      <img src={img4} className="img-fluid" alt="product" />
                    </div>
                  </Carousel>

                  {/* Add a Second Image */}
                </div>
                {/* Product Text */}
                <div className="col mx-auto col-md-6 my-3 text-capitalize">
                  <h1 className="display-3">{title}</h1>

                  <h4 className="text-black">
                    <strong className="text-black">
                      price : <span>$</span>
                      {price}
                    </strong>
                  </h4>
                  <h4 className="text-blue">
                    <DropDown
                      title="Options"
                      special={special}
                      size={size1}
                      size1={size2}
                      size2={size3}
                      size3={size4}
                      size4={size5}
                      size5={size6}
                      size6={size7}
                      size7={size8}
                      size8={size9}
                      size9={size10}
                      size10={size11}
                      size11={size12}
                      size12={size13}
                      size13={size14}
                      size14={size15}
                      size15={size16}
                      size16={size17}
                      size17={size18}
                      size18={size19}
                      size19={size20}
                      size20={size21}
                      size21={size22}
                    />
                  </h4>

                  <p className="text-black ">{info}</p>
                  <p className="text-black ">{fabric}</p>

                  <small className="text-danger">{luxury}</small>
                  {/* buttons */}
                  <div>
                    <Link to="/all">
                      <AwesomeButton
                        className="text-capitalize mx-10"
                        ripple
                        size="large"
                        type="primary"
                      >
                        Back To Products
                      </AwesomeButton>
                    </Link>

                    <div className="mt-2">
                      <AwesomeButton
                        className="text-capitalize m-auto"
                        ripple
                        size="medium"
                        type="primary"
                        cart
                        disabled={inCart ? true : false}
                        onPress={() => {
                          value.addToCart(id);
                        }}
                      >
                        {inCart ? "inCart" : "add to cart"}
                      </AwesomeButton>
                    </div>
                    <ItemCategory title={category} />
                    <div className="mt-2">
                      <img
                        src="https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/logo-center/9_bdg_secured_by_pp_2line.png"
                        border="0"
                        alt="Secured by PayPal"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        }}
      </ProductConsumer>
    );
  }
}

Answer 1

Why not simply make the sizes an array so you can loop over them?

// In your object instead of having multiple sizes keys separately,
// have a single property called sizes
{
    id: 6.97,
    title: "Adidas Yeezy Boost 350 V2 Glow",
    img: "img/product-6.97.png",
    img2: "img/product-6.97-1.png",
    img3: "img/product-6.97-2.png",
    img4: "img/product-6.97-3.png",
    price: 800,
    info: "Adidas Yeezy Boost 350 V2 Glow",
    inCart: false,
    count: 0,
    total: 0,
    sizes:["4", "4.5", "6", "7", /*and the rest of the values*/],
    luxury:
      "All Luxuryitems are inspected to verify authenticity (Sizes above 14 may cost more)",
    category: "Mens Shoes"
  },

//Then you could simply do something like this 
{this.props.yourObjectName.sizes.map((size, index)=> {
   return (
      <DropdownItem className="bg-info" key={index}>{size}</DropdownItem>
    )

})