Assigning each button it's own individual state count

Question

My code below shows my current component design. This is a counter component which is responsible for incrementing a counter for the respective array item and also for adding the clicked item to the cart. I am trying to figure out if there is some way in which I can assign each array item within the items array to its own state count value. Currently, the screen shows four array items, with each one having a button next to it and also a count. When clicking the increment button for any particular item, the state count for all buttons is updated and rendered, which is not what I want. I have tried to assign each button it's own state count in several ways, but haven't been able to figure out the right way. I would like to somehow bind a state count value to each button so that each one has it's individual state count.I would really appreciate if someone can provide some tips or insight as I dont know of a way to isolate the state count for each button and make it unique so that when one value's button is clicked, only the state count for that particular button (located next to the increment button) is updated and not the others.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      cart: [],
    };
  }

  handleIncrement = (e) => {
    this.setState({
      count: this.state.count + 1,
      cart: [...this.state.cart, e.target.value],
    });
  };

  render() {
    const listItems = this.props.items.map((item) => (
      <li key={item.id}>
        {item.value}
        <button onClick={this.handleIncrement}>+</button>
        {this.state.count}
      </li>
    ));
    return (
      <div>
        {listItems}
      </div>
    );
  }
}

Answer 1

If you want to add to the list of items without rendering the button, you can add a custom property to mark that it is a custom addition:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, value: "L1" },
        { id: 2, value: "L2" },
        { id: 3, value: "L3" },
        { id: 4, value: "L4" },
      ]
    }
  }
  addToItems = items => {
    this.setState({
      items,
    });
  }
  render() {
    var cartArray = [];
    
    return (
      <div>
        <h1>List</h1>
        {this.state.items.map((item) =>
            <Counter
              key={item.id}
              value={item.value}
              id={item.id}
              custom={item.custom}
              cart={cartArray}
              addToItems={this.addToItems}
              items={this.state.items}
            />
        )}
      </div>
    );
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleIncrement = () => {
    this.setState({
      count: this.state.count + 1,
    });
    this.props.cart.push(this.props.value);
  };
  addTo = () => {
    const { items } = this.props;
    let lastId = items.length;
    lastId++;
    this.props.addToItems([
    ...items,
    {
      id: lastId,
      value: `L${lastId}`,
      custom: true,
    }]);
  };
  render() {
    return (
      <div>
        {this.props.value}
        {
          !this.props.custom && 
          (
            <span>
              <button onClick={this.handleIncrement}>+                 </button>
              {this.state.count}
            </span>
          )
        }
        <Cart addTo={this.addTo} />
      </div>
    );
  }
}
class Cart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
      return (
        <div>
          <ListFunctions
            addClick={this.props.addTo}
          />
        </div>
      );
    return null;
  }
}
const ListFunctions = ({ addClick}) => (
  <div>
    <button onClick={addClick}>Add To List</button>
  </div>
);

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

What I did here is I remove the constructor, update Counter component props, update the event on how to update your cart in Example component, adjusted the Counter component, for the Cart component, I added componentDidMount and shouldComponentUpdate make sure that the component will re-render only when props listArray is changing. Here's the code.

class Example extends React.Component {
    state = {
        cart: [],
        items: [
            { id: 1, value: "L1" },
            { id: 2, value: "L2" },
            { id: 3, value: "L3" },
            { id: 4, value: "L4" }
        ]
    }

    render() {
        const { cart } = this.state

        return (
            <div>
                <h1>List</h1>
                { items.map(
                    ({ id, ...rest }) => (
                        <Counter
                            key={ id }
                            { ...rest }
                            cart={ cart }
                            onAddToCard={ this.handleAddCart }
                        />
                    )
                ) }
            </div>
        )
    }

    handleAddCart = (item) => {
        this.setState(({ items }) => ([ ...items, item ]))
    }
}

class Counter extends React.Component {
    state = {
        count: 0
    }

    handleIncrement = () => {
        this.setState(({ count }) => ({ count: count++ }))
    }
    
    render() {
        const { count } = this.state
        const { cart, value } = this.props

        return (
            <div>
                { value }
                <span>
                    <button onClick={ this.handleIncrement }>+</button>
                    { count }
                </span>
                <Cart listArray={ cart } />
            </div>
        )
    }
}

class Cart extends React.Component {
    state = {
        cart: []
    }

    addTo = () => (
        <div>List: </div>
    )

    componentDidMount() {
        const { cart } = this.props

        this.setState({ cart })
    }

    shouldComponentUpdate({ listArray }) {
        return listArray.length !== this.state.cart.length
    }

    render() {
        return (
            <div>
                <ListFunctions addClick={ this.addTo } />
            </div>
        )
    }
}

const ListFunctions = ({ addClick }) => (
    <div>
        <button onClick={ addClick }>Add To List</button>
    </div>
)