Как создать список счетчиков с собственным состоянием?

Question

Как правильно создать класс который создать по id счетчики с initial и кнопками + и -
Первый счетчик кнопка - делает min: -5, а кнопка + делает max: 10

import "./styles.css";

import React from 'react';
import { useState } from "react";

const counters = [
  {id: 1, initial: 6, min: -5, max: 10},
  {id: 2, initial: 5},
  {id: 3,},
];


class Сount extends React.Component {
  render() {
    return this.props.count.initial
  }
}

class List extends React.Component {
  render() {
    return (
        this.props.data.map((count)=> <Сount key={count.initial} count={count}></Сount> )
    )
  }
}

export default function App() {

  const [initial, setCount] = useState(0)
  const handleDec = () => {
    setCount(initial - 10)
  }
  const handleInc = () => {
    setCount(initial + 10);
  };
  const handleReset = () => {
    setCount(0);
  };

  return (
    <div className="App">

      <List data={counters}> </List>

    <div className="counter">
      <div className="count">
        <div>Текущий счет {initial}</div>
        <button className="btn_dec" onClick={handleDec}>-</button>
        <button className="btn_inc" onClick={handleInc}>+</button>
        <button className="btn_reset" onClick={handleReset}>reset</button>
      </div>
    </div>
    </div>
  );
}

Answer 1

Создадим список счетчиков, которые будут обладать собственным состоянием

Создадим компонент Count, который будет реализовывать счетчик с собственным состоянием.
В компонент будут передаваться параметры, которые будут использованы для инициализации начального состояния компонента

В компоненте создадим функции для увеличения, уменьшения и обнуления счетчика

const Count = ({ data }) => {
  const [count, setC] = useState(data.initial || 0); //Счетчик
  const [max] = useState(data.max || 10); // На сколько увеличивать
  const [min] = useState(data.min || 5); // На сколько уменьшать
  // Функция увеличения счетчика
  const inc = () => {
    setC(prev => prev + max )
  }
  // Функция уменьшения счетчика
  const dec = () => {
    setC(prev => prev - min )
  }
  // Функция обнуления счетчика
  const clean = () => {
    setC(0)
  }
  
  return (
    <div>
      {count}
      {' '}<button onClick={inc}>+</button>
      {' '}<button onClick={dec}>-</button>
      {' '}<button onClick={clean}>0</button>
    </div>
  )
}

Рендерить счетчики будем из массива объектов(Который может быть константой или получаемым из внешнего API). Каждый элемент содержит(или не содержит) значения для каждого компонента, на сколько увеличивать, на сколько уменьшать. Как видно из компонента выше, если значение не передано, назначаем дефолтное значение.

const counters = [
  {id: 1, initial: 6, min: 5, max: 10},
  {id: 2, initial: 5, min: 3},
  {id: 3,},
  {id: 4, initial: 5, max: 20},
];

Рендерить список будем при помощи метода .map().
Полный код компонента с реализацией списка счетчиков:

const counters = [
  {id: 1, initial: 6, min: 5, max: 10},
  {id: 2, initial: 5, min: 3},
  {id: 3,},
  {id: 4, initial: 5, max: 20},
];
    
const Count = ({ data }) => {
  const [count, setC] = useState(data.initial || 0)
  const [max] = useState(data.max || 10)
  const [min] = useState(data.min || 5)
  
  const inc = () => {
    setC(prev => prev + max )
  }

  const dec = () => {
    setC(prev => prev - min )
  }
  const clean = () => {
    setC(0)
  }

  return (
    <div>
      {count}
      {' '}<button onClick={inc}>+</button>
      {' '}<button onClick={dec}>-</button>
      {' '}<button onClick={clean}>0</button>
    </div>
  )
}

export default function App() {
  const [initial, setCount] = useState(0)
  const [cnt, setCnt] = useState(counters)
  const handleDec = () => {
    setCount(initial - 10)
  }
  const handleInc = () => {
    setCount(initial + 10);
  };
  const handleReset = () => {
    setCount(0);
  };

  return (
    <div className="App">

    {cnt.map(item => <Count data={item} />)}

    <div className="counter">
      <div className="count">
        <div>Текущий счет {initial}</div>
        <button className="btn_dec" onClick={handleDec}>-</button>
        <button className="btn_inc" onClick={handleInc}>+</button>
        <button className="btn_reset" onClick={handleReset}>reset</button>
      </div>
    </div>
    </div>
  );
}

Можно сделать так, что бы состояние хранилось в родительском компоненте, а в дочерний передавались сами значения.

БЛОГ НА HUSL

Как создать список счетчиков с собственным состоянием?

Ответы (1 шт):

Создадим список счетчиков, которые будут обладать собственным состоянием