React.js each rows checking using condition rendering-CodePudding

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.

CodePudding user response：

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")
   }}
/>

CodePudding user response：

You can compose another component with input and your matching label. This would also work:

Create a new input component like below:

const MyInput = ({ item }) => {
  const [value, setValue] = React.useState("");

  return (
    <div>
      <input
        type="number"
        value={value}
        className="form-control"
        placeholder="XXX"
        onChange={(e) => setValue(e.target.value)}
      />
      {value == item.pQty - item.saleStock && <p>Value is Matching</p>}
    </div>
  );
};

Replace the current input with MyInput:

<td>
   <MyInput item={item} />
</td>

CodePudding user response：

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!' }}
        />