title: How to fetch data(GET) when the codition satisfied in React?
body: <p>I tried to communicate with Backend for using fetch(Get). I want to fetch whenever I click the color or size. So, when I click the color the URL should be &quot;products?color=red&amp;color=blue&amp;color=black&quot;. At the same time, if I click the size button, it should be &quot;products?color=red&amp;color=blue&amp;color=black&amp;size=230&amp;size=240&quot; kinda history.push.
  So, when I google it, I realize that I guess I might be use componentDidUpdate because thee setState is changed whenever I click the color or size.
  <a href="https://i.stack.imgur.com/XeZ1m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XeZ1m.png" alt="enter image description here" /></a></p>
  <p>However, I am not sure how do I combine two functions: updateSize and updateColor with componentDidUpdate. So, In the componentDidUpdate, I would add this condition in order to prevent the infinite loop that is</p>
  <pre><code>if(this.propss.match.params.name !== prevProps.match.params.name) {
     fetch(
        `${API}{this.props.location.pathname}` + size=? or color=? i am not sure...)
  }
  </code></pre>
  <p>Could you help me with my situation? please let me know If I approach the wrong way.
  I really appreciate your help! I am struggling with this issue for whole day...
  I will leave the entire code just in case.</p>
  <pre><code>import React, { Component } from 'react';
  import './Main.scss';
  import COLOR_LISTS from './colorList';
  import Products from './ProductsInfo/Products';
  import { Link } from 'react-router-dom';
  import { API } from '../../config';
  
  export class Main extends Component {
    constructor(props) {
      super(props);
      this.state = {
        productsInfo: [],
        selectedItemColor: [],
      };
    }
  
    componentDidMount() {
      fetch('/data/MainProducts.json', {})
        .then(res =&gt; res.json())
        .then(data =&gt; {
          this.setState({
            productsInfo: data,
          });
        });
    }
  
    // componentDidMount() {
    //   fetch(`${API}{this.props.location.pathname}`, {})
    //     .then(res =&gt; res.json())
    //     .then(result =&gt; console.log(result))
    //     .then(data =&gt; {
    //       this.setState({
    //         productsInfo: data,
    //       });
    //     });
    // }
  
    updateProducts = name =&gt; {
      fetch(`/data/${name}.json`, {})
        .then(res =&gt; res.json())
        .then(data =&gt; {
          this.setState({
            productsInfo: data,
          });
        });
    };
  
    updateSize = e =&gt; {
      const { history, location } = this.props;
      const name = e.currentTarget.value;
  
      const currentQueryString = location.search;
      const url = new URLSearchParams(currentQueryString);
  
      const isSizeExist = url.getAll('size').includes(name);
  
      if (isSizeExist) {
        filterSizeExist();
      } else {
        filterSizeNotExist();
      }
  
      applyQueryStringToURL();
      function filterSizeExist() {
        const sizes = url.getAll('size');
        const isCertainSizeExist = sizes.includes(name);
  
        if (isCertainSizeExist) {
          const filteredSizes = sizes.filter(size =&gt; size !== name);
  
          url.delete('size');
          filteredSizes.forEach(size =&gt; url.append('size', size));
        }
      }
  
      function filterSizeNotExist() {
        url.append('size', name);
      }
  
      function applyQueryStringToURL() {
        const qs = url.toString();
        const query = `${url.toString() ? '?' : ''}` + qs;
  
        history.push('/products' + query);
      }
      this.setState({ selectedItemSize: url.getAll('size') });
    };
  
    updateColor = e =&gt; {
      const { history, location } = this.props;
      const name = e.currentTarget.value;
  
      const currentQueryString = location.search;
      const url = new URLSearchParams(currentQueryString);
  
      const isSizeExist = url.getAll('color').includes(name);
  
      if (isSizeExist) {
        const colors = url.getAll('color');
        const isCertainSizeExist = colors.includes(name);
  
        if (isCertainSizeExist) {
          const filteredColors = colors.filter(color =&gt; color !== name);
  
          url.delete('color');
          filteredColors.forEach(color =&gt; url.append('color', color));
        }
      } else {
        url.append('color', name);
      }
  
      const query = url.toString() ? '?' + url.toString() : '';
  
      history.push('/products' + query);
  
      this.setState({ selectedItemColor: url.getAll('color') });
    };
  
    render() {
      // console.log(this.props.location.pathname);
      // console.log(this.props.match.params);
      // console.log(prevProps.match.params.name);
      const { productsInfo, selectedItemColor } = this.state;
      return (
        &lt;div className=&quot;MainWrapper&quot;&gt;
          &lt;div className=&quot;sectionHeader&quot;&gt;
            &lt;div className=&quot;sectionTitle&quot;&gt;
              &lt;div className=&quot;sectionTitleCategory&quot;&gt;
                &lt;span className=&quot;categoryName&quot;&gt;Men&lt;/span&gt;
                &lt;br /&gt;
                &lt;br /&gt;
                &lt;span&gt;Men's 의류(12)&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div className=&quot;sectionControl&quot;&gt;
                &lt;button&gt;필터&lt;/button&gt;
                &lt;select name=&quot;list&quot; className=&quot;productsFilter&quot;&gt;
                  &lt;option value=&quot;newestOrder&quot;&gt;신상품순&lt;/option&gt;
                  &lt;option value=&quot;hightCostOrder&quot;&gt;높은가격순&lt;/option&gt;
                  &lt;option value=&quot;lowCostOrder&quot;&gt;낮은가격순&lt;/option&gt;
                &lt;/select&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;contentsWrapper&quot;&gt;
            &lt;aside className=&quot;contentsSide&quot;&gt;
              &lt;div className=&quot;HorizontalLine&quot; /&gt;
              &lt;div className=&quot;colors&quot;&gt;
                &lt;span&gt;색상&lt;/span&gt;
                &lt;ul className=&quot;colorLists&quot;&gt;
                  {COLOR_LISTS.map((color, idx) =&gt; {
                    return (
                      &lt;li className=&quot;colorLayout&quot; key={idx}&gt;
                        &lt;label
                          className={`checkboxLabel ${
                            selectedItemColor.includes(color.color_name)
                              ? 'checked'
                              : ''
                          }`}
                          style={{ backgroundColor: color.colorProps }}
                        &gt;
                          &lt;input
                            onChange={this.updateColor}
                            type=&quot;checkbox&quot;
                            value={color.color_name}
                          /&gt;
                        &lt;/label&gt;
                        &lt;span className=&quot;productColor&quot;&gt;{color.color_name}&lt;/span&gt;
                      &lt;/li&gt;
                    );
                  })}
                &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div className=&quot;sizes&quot;&gt;
                &lt;div className=&quot;HorizontalLine&quot; /&gt;
                &lt;span&gt;사이즈&lt;/span&gt;
                &lt;div className=&quot;sizeLists&quot;&gt;
                  &lt;label&gt;
                    &lt;button
                      className=&quot;active&quot;
                      onClick={this.updateSize}
                      value=&quot;230&quot;
                      key=&quot;1&quot;
                    &gt;
                      230
                    &lt;/button&gt;
                  &lt;/label&gt;
                  &lt;button onClick={this.updateSize} value=&quot;235&quot; key=&quot;2&quot;&gt;
                    235
                  &lt;/button&gt;
                  &lt;button onClick={this.updateSize} value=&quot;240&quot; key=&quot;3&quot;&gt;
                    240
                  &lt;/button&gt;
                  &lt;button onClick={this.updateSize} value=&quot;245&quot; key=&quot;4&quot;&gt;
                    245
                  &lt;/button&gt;
                  &lt;button onClick={this.updateSize} value=&quot;250&quot; key=&quot;5&quot;&gt;
                    250
                  &lt;/button&gt;
                  &lt;button onClick={this.updateSize} value=&quot;255&quot; key=&quot;6&quot;&gt;
                    255
                  &lt;/button&gt;
                  &lt;button onClick={this.updateSize} value=&quot;260&quot; key=&quot;7&quot;&gt;
                    260
                  &lt;/button&gt;
                  &lt;button onClick={this.updateSize} value=&quot;265&quot; key=&quot;8&quot;&gt;
                    265
                  &lt;/button&gt;
                  &lt;button onClick={this.updateSize} value=&quot;270&quot; key=&quot;9&quot;&gt;
                    270
                  &lt;/button&gt;
                  &lt;button onClick={this.updateSize} value=&quot;275&quot; key=&quot;10&quot;&gt;
                    275
                  &lt;/button&gt;
                  &lt;button onClick={this.updateSize} value=&quot;280&quot; key=&quot;11&quot;&gt;
                    280
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div className=&quot;HorizontalLine&quot; /&gt;
              &lt;/div&gt;
            &lt;/aside&gt;
  
            &lt;main className=&quot;contentsBody&quot;&gt;
              &lt;div className=&quot;contentsLink&quot;&gt;
                &lt;div className=&quot;viewAll&quot;&gt;
                  &lt;Link
                    to={{
                      pathname: '/products',
                      state: { message: 'hello, im a passed message!' },
                    }}
                  &gt;
                    &lt;button onClick={() =&gt; this.updateProducts('MainProducts')}&gt;
                      {/* &lt;button onClick={this.updateProducts} value=&quot;acc&quot;&gt; 
                      and then using e.currentTarget.value same as top one. */}
                      &lt;span&gt;전체 보기&lt;/span&gt;
                    &lt;/button&gt;
                  &lt;/Link&gt;
                &lt;/div&gt;
                &lt;div className=&quot;Shoes&quot;&gt;
                  &lt;Link
                    to={{
                      pathname: '/products/shoes',
                    }}
                  &gt;
                    &lt;button
                      onClick={() =&gt; this.updateProducts('MainProductsShoes')}
                    &gt;
                      &lt;span&gt;신발&lt;/span&gt;
                    &lt;/button&gt;
                  &lt;/Link&gt;
                &lt;/div&gt;
                &lt;div className=&quot;Clothes&quot;&gt;
                  &lt;Link
                    to={{
                      pathname: '/products/clothing',
                    }}
                  &gt;
                    &lt;button
                      onClick={() =&gt; this.updateProducts('MainProductsClothing')}
                    &gt;
                      &lt;span&gt;옷&lt;/span&gt;
                    &lt;/button&gt;
                  &lt;/Link&gt;
                &lt;/div&gt;
                &lt;div className=&quot;Supplies&quot;&gt;
                  &lt;Link
                    to={{
                      pathname: '/products/acc',
                    }}
                  &gt;
                    &lt;button
                      onClick={() =&gt; this.updateProducts('MainProductsAcc')}
                    &gt;
                      &lt;span&gt;용품&lt;/span&gt;
                    &lt;/button&gt;
                  &lt;/Link&gt;
                &lt;/div&gt;
                &lt;div className=&quot;Sports&quot;&gt;
                  &lt;Link
                    to={{
                      pathname: '/products/sports',
                    }}
                  &gt;
                    &lt;button
                      onClick={() =&gt; this.updateProducts('MainProductsSports')}
                    &gt;
                      &lt;span&gt;스포츠&lt;/span&gt;
                    &lt;/button&gt;
                  &lt;/Link&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;article className=&quot;productsMapping&quot;&gt;
                {productsInfo.map((product, idx) =&gt; (
                  &lt;Products key={idx} productInfo={product} /&gt;
                ))}
              &lt;/article&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Main;
  </code></pre>