I'm working on a E-commerce site where I need to show product sizes based on color. Where all available sizes will be clickable and other sizes will be disabled. Here is my code for SizeVariant component.

import React from "react";
import styled from "styled-components";

const SizeVariant = ({ text, ...props }) => {

  return (
    <StyledSizeVariant {...props}>
      <input type="radio" name="text" id={text} value={text} />
      <label htmlFor={text}>{text}</label>
    </StyledSizeVariant>
  );
};

const StyledSizeVariant = styled.div`
  input[type="radio"] {
    display: none;

    &:checked   label {
      box-shadow: 0px 0px 2px #7d7d31;
      border: 2px solid #FFCD4E;
    
    } //
  }

  label {
    display: inline-block;
    padding: 0 1rem;
    height: 30px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 16px;
  }
`;

export default SizeVariant;

I have a array of sizes.

   <FlexBox alignItems="center" mb="16px">

            {sizeList && sizeList.map((item) => (
              <SizeVariant key={item.attribute_title} text={item.attribute_title} onClick={(e) => handlePrice(item)} />
            ))}
          </FlexBox>

under some conditions, I want to disable some of the sizes(that is radio button) from sizeList array. How can I do that?

CodePudding user response：

Take a state and store the index no of the clicked radio button. Then compare the index no of other radio button with it if index doesn't match then you can disable those buttons.

import React from "react";
import styled from "styled-components";

const SizeVariant = ({ text, ...props }) => {

    const [buttonIndex, setButtonIndex] = useState();


  return (
    <StyledSizeVariant {...props}>
      <input onClick={()=>setButtonIndex(index)} disabled={buttonIndex  && buttonIndex == indexOfYourArry?false:true} type="radio" name="text" id={text} value={text} />
      <label htmlFor={text}>{text}</label>
    </StyledSizeVariant>
  );
};

CodePudding user response：

You can pass the condition inside input disable attribute.

Here is the code sample from your question:

<FlexBox alignItems="center" mb="16px">
    {sizeList && sizeList.map((item) => (
        <SizeVariant
            key={item.attribute_title}
            text={item.attribute_title}
            onClick={(e) => handlePrice(item)}
            disabled={item.attribute_disable} />
    ))}
</FlexBox>

// sizevariant
const SizeVariant = ({ text, disabled, ...props }) => {
    return (
        <StyledSizeVariant {...props}>
            <input type="radio" name="text" id={text} value={text} disabled={disabled} />
            <label htmlFor={text}>{text}</label>
        </StyledSizeVariant>
    );
}

In here you can see, I've passed the new props, named disabled, and used this in a SizeVariant Component.

You can logically disabled the input box,

<input type="radio" name="text" id={text} value={text} disabled={something ? true : false} />

In here something can be any condition from your array.

CodePudding user response：

It depends on what information you have in the sizeList items:

1. If size list only gives you the available sizes then you need to create radio options for all possible sizes and only enable those that are present in the size list, something like

const allSizes = [
  { title: 'S', enabled: false },
  { title: 'M', enabled: false },
  { title: 'L', enabled: false },
]

const Component = () => {
  const sizes = useMemo(() => {
    return (sizeList || []).reduce((agg, item) => {
      agg[item.attribute_title].enabled = true
      return agg
    }, allSizes)
  }, [sizeList])

  return (
    <FlexBox alignItems="center" mb="16px">
      {sizes.map((item) => (
        <SizeVariant
          key={item.title}
          text={item.title}
          disabled={item.disabled}
          onClick={(e) => handlePrice(item)} // you might need to change this to match the new structure
        />
      ))}
    </FlexBox>
  )
}

const SizeVariant = ({ text, ...props }) => {

  return (
    <StyledSizeVariant {...props}>
      <input type="radio" name="text" disabled={props.disabled} id={text} value={text} />
      <label htmlFor={text}>{text}</label>
    </StyledSizeVariant>
  );
};

2. The sizeList contains all possible sizes with some property to tell if it is available or not. In this case you need to use that flag as the disabled props.

Hope this makes sense :)