title: Conditional rendering of Button 'variant' that also determines onClick condition - React
body: <p>I have a list of buttons that needs to be split into two variants: singleSelect and multipleSelect. Both the behaviour of the buttons onClick and whether or not it contains an icon will be determined by whether it is one or the other variant. How do I go about achieving this? I have only ever dealt with css variants before and that approach just isn't applicable here.</p>
  <p>Component:</p>
  <pre><code>const Category = (props) =&gt; {
    const {
      id,
      children,
      onClick,
      selected,
      isMulti,
    } = props;
  
    return (
      &lt;div className={styles.category}&gt;
        &lt;button
          type='button'
          onClick={() =&gt; onClick(id)}
          className={selected ? styles.selected : ''}
        &gt;
          {children}
          {selected &amp;&amp; isMulti ? (
            &lt;Close /&gt;
          ) : null}
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  Category.defaultProps = {
    selected: false,
    isMulti: false,
  };
  
  Category.propTypes = {
    id: PropTypes.string.isRequired,
    children: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
    selected: PropTypes.bool,
    isMulti: PropTypes.bool,
  };
  
  export default Category;
  </code></pre>
  <p>Module:</p>
  <pre><code>const CategoryList = (props) =&gt; {
    const { categories } = props;
    const [selected, setSelected] = useState([]);
  
    const handleSelected = (btnId) =&gt; {
      // if multipleSelect:
      if (btnId !== 'all' &amp;&amp; selected.includes('all')) {
        setSelected((prevSelected) =&gt; prevSelected.filter((s) =&gt; s === btnId));
      }
      if (btnId === 'all') {
        setSelected((prevSelected) =&gt; prevSelected.filter((s) =&gt; s === btnId));
      }
      if (selected.includes(btnId)) {
        setSelected((prevSelected) =&gt; prevSelected.filter((s) =&gt; s !== btnId));
      } else {
        setSelected((prevSelected) =&gt; ([...prevSelected, btnId]));
      }
      // else (singleSelect): setSelected((prevSelected) =&gt; prevSelected.filter((s) =&gt; s === btnId));
    };
  
    return (
      &lt;div className={styles.categoriesList}&gt;
        {categories.map((category) =&gt; (
          &lt;Category
            key={category.id}
            id={category.id}
            selected={selected.includes(category.id)}
            onClick={handleSelected}
            // if multipleSelect: isMulti,
          &gt;
            {category.name}
          &lt;/Category&gt;
        ))}
      &lt;/div&gt;
    );
  };
  
  CategoryList.propTypes = {
    categories: PropTypes.arrayOf(PropTypes.object).isRequired,
  };
  
  export default CategoryList;
  </code></pre>
  <p>Storybook stories:</p>
  <pre><code>import React from 'react';
  import CategoryList from './index';
  
  export default {
    title: 'Modules/CategoryList',
    component: CategoryList,
  };
  
  export const SingleSelect = () =&gt; (
    &lt;CategoryList
      categories={[
        {
          id: 'all',
          name: 'Vis alle',
        },
        {
          id: 'cat1',
          name: 'Category 1',
        },
        {
          id: 'cat2',
          name: 'Category 2',
        },
        {
          id: 'cat3',
          name: 'Category 3',
        },
      ]}
    /&gt;
  );
  
  export const MultipleSelect = () =&gt; (
    &lt;CategoryList
      categories={[
        {
          id: 'all',
          name: 'Vis alle',
        },
        {
          id: 'cat1',
          name: 'Category 1',
        },
        {
          id: 'cat2',
          name: 'Category 2',
        },
        {
          id: 'cat3',
          name: 'Category 3',
        },
      ]}
    /&gt;
  );
  </code></pre>