filter array using includes

Question

I'm trying to filter my array availableSizes and just display a certain size that I input into includes

I am testing with 5 and it should output just the number 5 but I am getting this is not a function

How can I filter this array so it will just output the numbers passed into the includes method?

 render() {
        const { id, img, name, price, desc, color, match, material, size, slug } = this.props
        const { selectedSize, showSizes } = this.state
        const availableSizes = [5,6,7,8,9,10,11,12,13,14,15]

    return (
      <Wrap>
        <Half>
          <ImgWrap>
          {showSizes &&
            <Sizes>

              <SizeWrap>
                <div>selecta size</div>
                {availableSizes.filter(availableSize => availableSize.includes(5)).map((availableSize, index) =>
                  <Size
                    key={index}
                    active={selectedSize === availableSize.size}
                    onClick={() => this.handleSelectSize(availableSize.size)}
                    className="snipcart-add-item"
                    data-item-id={id}
                    data-item-name={name}
                    data-item-price={price}
                    data-item-url="/"
                    data-item-size={this.state.size}
                    data-item-description={desc}
                  >
                    {availableSize}
                  </Size>
                )}
              </SizeWrap>

jmargolisvt · Accepted Answer · 2018-10-13 21:38:57Z

3

Taking this one (likely) step further, you probably want to match available sizes to more than one value. So if you have a user who is interested in sizes 5 and 6, you might store that in an array like: var selectedSizes = [5, 6]

Then you could match against the available sizes with: availableSizes.filter(x => selectedSizes.includes(x))

answered Oct 13, 2018 at 21:38

jmargolisvt

6,1165 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EQuimper · Accepted Answer · 2018-10-13 21:59:29Z

2

availableSize from your filter callback will be a number. Number don't have method includes. What you should do is check if equal.

availableSizes.filter(availableSize => availableSize === 5)

And for the active prop you should

active={selectedSize === availableSize}

For the onClick also change for

onClick={() => this.handleSelectSize(availableSize)}

For multiple size you can then build an array of these sizes

const mySizes = [4, 5] 
availableSizes.filter(availableSize => mySizes.includes(availableSize))

edited Oct 13, 2018 at 21:59

answered Oct 13, 2018 at 21:33

EQuimper

5,9298 gold badges32 silver badges42 bronze badges

5 Comments

tom harrison Over a year ago

console.log(availableSizes.includes(5)); == true, how does this work if number doesn't have this method?

EQuimper Over a year ago

availableSizes is the array. availableSize is a single number of the array availableSizes

EQuimper Over a year ago

If you look in mdn doc you will see filter callback provide you the item at certain index developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

tom harrison Over a year ago

ok so say I had 2 numbers instead of just 5 how can i check if the array includes both of these number and output the results?

EQuimper Over a year ago

build an array with both number an now check with the includes. const mySizes = [4, 5] availableSizes.filter(availableSize => mySizes.includes(availableSize))

Collectives™ on Stack Overflow

filter array using includes

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related