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.

Ali Dehghan · Accepted Answer · 2022-09-11 05:35:35Z

2

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

edited Sep 11, 2022 at 5:35

answered Sep 11, 2022 at 5:26

Ali Dehghan

3983 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kaushal Joshi · Accepted Answer · 2022-09-11 05:12:56Z

1

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

answered Sep 11, 2022 at 5:12

Kaushal Joshi

135 bronze badges

2 Comments

Chamidu Purage Over a year ago

alert working perfectly ,but separate component does not work.

Kaushal Joshi Over a year ago

Could you share a working mock example of this code so I can test it? Also, how do you want the message to be displayed on the screen?

Amila Senadheera · Accepted Answer · 2022-09-11 05:18:04Z

1

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>

answered Sep 11, 2022 at 5:18

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Collectives™ on Stack Overflow

React.js each rows checking using condition rendering

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related