nivaech

const hpDelta = chance => 10 + (chance > 5 ? 10 : 0) + (chance > 7 ? 20 : 0);

const simpleFight = () => {
    let player_hp = 100;
    let enemy_hp = 100;
    let player_chance;
    let enemy_chance;

    const hpDelta = chance => 10 + (chance > 5 ? 10 : 0) + (chance > 7 ? 20 : 0);
    const randomChance = () => Math.floor(Math.random() * 11);
    const healthReport = hello => console.log(`${hello||''} Your health: ${player_hp}%, enemy health: ${enemy_hp}%`);
    const chanceReport = hello => console.log(`${hello||''} Your chance: ${player_chance}, enemy chance: ${enemy_chance}`);

    healthReport("Welcome!");

    while (player_hp || enemy_hp > 0) {
        player_chance = randomChance();
        enemy_chance = randomChance();
        chanceReport();
        if (player_chance > enemy_chance) {
            enemy_hp -= hpDelta(player_chance);
            console.log(`Your turn. Enemy health updated to: ${enemy_hp}%`);
        } else if (enemy_chance > player_chance) {
            player_hp = hpDelta(enemy_chance);
            console.log(`Enemy's turn. Your health updated to: ${player_hp}%`);
        } else {
            chanceReport('Equal chances!');
        }

        if (enemy_hp <= 0) {
            healthReport('You win!');
            break;
        } else if (player_hp <= 0) {
            healthReport('You lost!');
            break;
        }
    }
}


simpleFight();

const attacks = [
  { minChance: 7, damage: 40, name: 'critical' },
  { minChance: 5, damage: 20, name: 'big' },
  { minChance: 0, damage: 10, name: 'weak' },
];

const messages = {
  start: (player, enemy) => `Welcome! Yor health is - ${player}%, your enemy health - ${enemy}%`,
  end: (player, enemy) => `You ${enemy <= 0 ? 'win' : 'lost'}! Your hp level - ${player}, opponents hp level - ${enemy}`,
  chance: (player, enemy) => `your chance - ${player}, your opponent chance - ${enemy}`,
  turn: (player, enemy, hit, isEnemy) =>
`${isEnemy ? 'Enemy' : 'Your'} turn...
${isEnemy ? 'Enemy' : 'You'} did a ${hit} hit
${isEnemy ? 'Your' : 'Enemy'} hp - ${isEnemy ? player : enemy}`,
};


const simpleFight = () => {
  const hp = [ 100, 100 ];

  console.log(messages.start(...hp));

  while (hp.every(n => n > 0)) {
    const chances = hp.map(() => Math.random() * 11 | 0);

    console.log(messages.chance(...chances));

    if (chances[0] !== chances[1]) {
      const chance = Math.max(...chances);
      const attack = attacks.find(n => n.minChance < chance);
      const isEnemyAttacks = chance === chances[1];
      hp[+!isEnemyAttacks] -= attack.damage;

      console.log(messages.turn(...hp, attack.name, isEnemyAttacks));
    }
  }

  console.log(messages.end(...hp));
};

this.setState({
  productToCart: {
    ...this.state.productToCart,
    color,
  },
});

pickSize = size =>
  this.setState(prevState => ({
    productToCart: {
      ...prevState.productToCart,
      size,
    }
  }))

pickColor = color =>
  this.setState(prevState => ({
    productToCart: {
      ...prevState.productToCart,
      color,
    }
  }))

const ImageCard = ({ image, bio }) => {
  const [showBio, setShowBio] = useState(false);
  const handler = useCallback(() => {
    setShowBio(state => !state);
  }, []);

  return (
    <Wrapper>
      {showBio ? <Bio bio={bio} /> : <Image src={image} />}
      <Button onClick={hanlder}>Show bio</Button>;
    </Wrapper>
  );
};

Брать данные с арi, отображать их, сортировать - это вроде ясно. Но этого ведь точно недостаточно.

displayColors = (colorSet) => {
    return colorSet.map((color, index) => (
      <li
        className={`filter-item ${this.state.color === color ? 'active-item' : null}`}
        key={index}
        onClick={() => this.handleFilter('color', color)}
      > {color} </li>
    ));
  }

displayColors = (colorSet) => colorSet.map((color, index) => (
    <li
      className={`filter-item ${this.state.color === color ? 'active-item' : null}`}
      key={index}
      onClick={() => this.handleFilter('color', color)}
    > {color} </li>
  ))

В чём разница между созданием компонентов, через: стрелочную функцию, классами из новых версийES и React.createClass.

А так же, чем лучше пользоваться?

const filteredProducts = [
  [            true, n => n.type === 'Bras' ],
  [            true, n => n.price <= tempPrice ],
  [ color !== 'all', n => n.color === color ],
  [             cup, n => n.cup.includes(cup) ],
  [        shipping, n => n.freeShipping === true ],
  [          search, n => n.title.toLowerCase().startsWith(search.toLowerCase()) ],
].reduce((products, [ active, fn ]) => {
  return active
    ? products.filter(fn)
    : products;
}, storeProducts);

this.setState({ filteredProducts });

if (cup === "A") {
  tempProducts = brasAll.filter(item => item.cup.includes("A"))
} else if (cup === "B") {
  tempProducts = brasAll.filter(item => item.cup.includes("B"))
} else if (cup === "C") {
  tempProducts = brasAll.filter(item => item.cup.includes("C"))
} else if (cup === "D") {
  tempProducts = brasAll.filter(item => item.cup.includes("D"))
}

if (cup) {
  tempProducts = tempProducts.filter(item => item.cup.includes(cup));
}

handleSearch = () => {
  const { price, color, cup, shipping, search } = this.state;
  this.props.dispatch(fetchProducts({ price, color, cup, shipping, search });
};

GET 'https://api.mysite.com/products?search=soes&price=120&color=red'

Array.from(new Set(arr.flat()))

// или, без создания промежуточного массива

[...arr.reduce((acc, n) => (n.forEach(m => acc.add(m)), acc), new Set)]

Object.keys([].concat(...arr).reduce((acc, n) => (acc[n] = 1, acc), {}))

// или

Array.prototype.concat.apply([], arr).filter((n, i, a) => i === a.indexOf(n))

// или

`${arr}`.split(',').reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])

// или

String(arr).match(/\w/g).sort().filter((n, i, a) => n !== a[i - 1])

// или

arr.toString().match(/(\w)(?!.*\1)/g) || []

const products = filteredProducts.filter(product => product.category === "Some, category").map (item => {
                          return (
                          <ProductCard 
                            key={item.id}
                            product = {item}
                          />)} )
return (
  <div className="products-list">
                        <Title title="Some Title" />
                        <div className="products-container">
                          <p> {products.length} </p>
                        </div>
                        <div className="products-container">
                        {products}
                        </div>
                      </div>
)

const someCategoryProducts =
  filteredProducts.filter(product => product.category === "Some, category");

return (
  <div>
    <div>{someCategoryProducts.length}</div>
    <div>{someCategoryProducts.map(mapFn)}</div>
  <div>
);

const products = filteredProducts.filter(product => product.category === "Some, category");

const count = products.length;

return (
  <div className="products-list">
    <Title title="Some Title" />
    <div className="products-container">
        <p> {count} </p>
    </div>
    <div className="products-container">
      {products.map(product => (
          <ProductCard 
             key={product.id}
             product = {product}
           />
       ))}
     </div>
</div>
);

this.setState(state => Object
  .keys(state)
  .reduce((acc, n) => (acc[n] = n === 'свойствоКотороеДолжноБытьTrue', acc), {})
);