React.js each rows checking using condition rendering

Question

import React from "react";
import { Switch } from "@mui/material";
import { useState ,useRef} from "react";
import { useEffect } from "react";
import axios from "axios";

function DailyStock() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getDailyData();
  }, []);

  
  const getDailyData =()=>{
    axios.get("http://localhost:4000/api/stocks/view-stock").then((res) => {
      const getData = res.data.data;
      setData(getData);
    });
  }

  return (
    <div className="row">
    
          <table
            id="datatable-buttons"
            className="table table-bordered dt-responsive nowrap w-100 "
          >
            <thead>
              <tr>
                <th>
                  <center>Product Name</center>
                </th>
                <th>
                  <center>Sold Quantity</center>
                </th>
              </tr>
            </thead>
            {data?.map((item) => {
              return (
                <tr>
                  <td>
                    <h5 className="ps-5">{item.pName}</h5>
                  </td>
                  <td>
                   
                            <input
                              type="number"
                              className="form-control"
                              placeholder="XXX"
                              onChange={(e)=>{e.target.value==(item.pQty-item.saleStock) && <><p>Value is Matching</p></> }}
                          />
                            
                  </td>
                </tr>
              );
            })}
          </table>
    </div>
  );
}

export default DailyStock;

I fetched values from the database to dataTable. It works perfectly. Each row has an input box and its given value should be equal to the fetched value of DB. then printing as "value is matching". I tried it from the "onChange" event. it doesn't work. when I am using state. It applied to all rows. I just need to check row by row.

Answer 1

The problem is, In onChange method of the input element, you are trying to set an HTML element and you have got Uncaught SyntaxError. You can do it simply like that:

  <input
         ...
          onChange={(e)=>{e.target.value==(item.pQty-item.saleStock) && 'Value is matching!' }}
        />

Answer 2

You can not write expressions, especially JSX, inside the onChange function. It needs to be an assignment or a function call.

Since you are in a map function returning JSX, try defining a separate component which will be called here. Something like this:

/src/components/Message.jsx

export default function Message() {
  return <>
    <p>Value is matching!</p>
  </>
}

/src/components/DailyStock.jsx

import Message from "./Message"

function DailyStock() {
  ...
  return (
      ...
      <td>
        <input
          type="number"
          className="form-control"
          placeholder="XXX"
          onChange={(e)=>{e.target.value==(item.pQty-item.saleStock) && <Message /> }}
        />
      </td>
      ...                  
  );

}

export default DailyStock;

---

Or else, you can write an alert or a tooltip something like this:

<input
   onChange={(e) => {
     e.target.value === item.pQty - item.saleStock && alert("hi")
   }}
/>