Incrementing a state by 1 via a button, in React/JavaScript [duplicate]

I am currently trying to get this button to increment the "stock" value of each car. If someone can explain why it isn't working that would be super helpful.

class App extends React.Component {      constructor(props) {          super(props);          this.increment = this.increment.bind(this)          this.state = {              cars: [                  {                      "manufacturer": "Toyota",                      "model": "Rav4",                      "year": 2008,                      "stock": 3,                      "price": 8500                  },                        {                      "manufacturer": "Toyota",                      "model": "Camry",                      "year": 2009,                      "stock": 2,                      "price": 6500                  },                    //theres more cars but I didn't want to list them all out     ]          };        }        increment() {          this.setState({            stock: this.state.stock + 1          });      };                      render() {          return (               <div>                  <h1>                      <tr>                          <td>manufacturer </td>                          <td>model </td>                          <td>year </td>                          <td>stock </td>                          <td>  </td>                          <td>price </td>                      </tr>                  </h1>                  <table>                      <tbody>                            {this.state.cars.map(car=>(                          <tr key={car.model}>                              <td>{car.manufacturer}</td>                              <td>{car.model}</td>                              <td>{car.year}</td>                              <td></td>                              <td>{car.stock}</td>                              <td>${car.price}</td>                              <td><button type="Button" onClick={this.increment}> Increment </button> </td>                          </tr>                                              ))                          }                        </tbody>                  </table>              </div>          );          };      }    ReactDOM.render(<App />, document.getElementById("app"))    

I tried to keep this short but I am also very unsure of what's causing the buttons to do absolutely nothing. I feel like I have really strong logic with implementing these but none of them work. Any help is appreciated.

https://stackoverflow.com/questions/66739813/incrementing-a-state-by-1-via-a-button-in-react-javascript March 22, 2021 at 11:04AM