Passing information through a button in REACT

Question

Hello I am making an ordering system, it gets values from a database and displays them with and add and subtract button, upon add it needs to pass the values name for testing purposes but for some reason it renders them every time the DOM re-renders.

This is the current code of the current page.

import React, { useState, useEffect } from "react";
import { Button, Row, Col } from "react-bootstrap";
import Axios from "axios";

export default function Waiter() {
  const [visibility, setVisibility] = React.useState("hidden");
  const [responseData, setResponseData] = useState([]);
  const [tableNo, setTableNo] = useState("");
  const [errVisibility, setErrVisibility] = useState("hidden");
  const order = [
    { name: "pizza", amount: "5", price: 15.0, table: "15" },
    { name: "burger", amount: "3", price: 12.0, table: "15" },
  ];
  let id = 0;

  // fetches data
  async function fetchData() {
    try {
      await Axios.get("http://localhost:3001/getfood")
        .then((response) => {
          setResponseData(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    } finally {
      console.log("Fetched Data");
    }
  }

  function NewOrder() {
    if (tableNo === "") {
      setErrVisibility("visible");
    } else {
      setVisibility("visible");
      setErrVisibility("hidden");
      fetchData();
    }
  }

  function add(val) {
    console.log(val);
  }

  function Cancel() {
    setVisibility("hidden");
    document.getElementById("tableNo").value = "";
    setTableNo("");
  }

  React.useEffect(() => {
    document.getElementById("information").style.visibility = visibility;
    document.getElementById("cancel").style.visibility = visibility;
    document.getElementById("order").style.visibility = visibility;
  }, [visibility]);

  useEffect(() => {
    document.getElementById("inputErr").style.visibility = errVisibility;
  }, [errVisibility]);
  return (
    <>
      <div>
        <Button id="newOrder" onClick={NewOrder}>
          Initiate New Order
        </Button>
        <label>Table No.</label>
        <input
          type="text"
          id="tableNo"
          onChange={(event) => {
            setTableNo(event.target.value);
          }}
        ></input>
        <p id="inputErr">No table number added</p>
      </div>

      <Row>
        <Col md={6} xs={2}>
          <div id="information">
            {responseData.map((val) => {
              id += 1;
              return (
                <div key={id.toString()}>
                  <div id="data">
                    <p>
                      Item: {val.item} Price: {val.price}
                      <button id="add" onClick={add("val")}>
                        add
                      </button>
                      <button id="remove">remove</button>
                      <p id="amount"></p>
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </Col>
        <Col md={6} xs={2}>
          <div id="order">
            {order.map((item) => {
              id += 1;
              return (
                <div {...id.toString()}>
                  <p>
                    Item: {item.name} Amount: {item.amount} Price: {item.price}
                  </p>
                </div>
              );
            })}
          </div>
        </Col>
      </Row>

      <Button id="cancel" onClick={Cancel}>
        Cancel
      </Button>
    </>
  );
}

This is the output in my browser console:

[Log] Fetched Data (main.chunk.js, line 1920)
[Log] undefined (main.92a481a2dd269378825e.hot-update.js, line 75, x4)
[Log] val (main.e73dbee36bf80f92817f.hot-update.js, line 74, x4)
[Log] val (main.e73dbee36bf80f92817f.hot-update.js, line 74, x8)

Answer 1

You need to call functions like below:-

<button id="add" onClick={() => add(val)}>
  add
</button>