[react]I want to put a background color on the rows of the grid when I put a sequence number in the input. What should I do?

jun 0
Viewed 13
[enter image description here][1]
    
    
[1]: https://i.stack.imgur.com/kjrm8.png

I want to change the background color of the grid rows when I enter a sequence number in the input below.

I am storing grid data in tableData. I have used the filter to get only one data value, but I can't add a background color. I want to add a background color to only one row when the number changes, how can I do that?

 const [select, setSelect] = useState("");
  const numSelect = tableData.filter((rows) => rows.SEQ == select);
  // const numSelect = tableData.filter((rows,index) => index +1 == select);
<tbody>
              {tableData?.map((el, i) => (
                <tr key={i}>
                  <td>{el.SEQ}</td>
                  <td>{el.PROD_CODE}</td>
                  <td>{el.GRADE}</td>
                  <td>{el.QTY}</td>
                  <td>{el.PRODDAT}</td>
                  <td>{el.JPSTSNAME}</td>
                  <td>{el.OWNNAME}</td>
                  <td>{el.COLORNAME}</td>
                  <td>{el.JPSPEC}</td>
                </tr>
              ))}
            </tbody>

row grid background-color reactjs
1 Answers

Not sure to understand but that's an approach on what i understood below.

const [select, setSelect] = useState();
const handleSelectedLine = (e) => setSelect(parseInt(e.target.value))

return (
<>
<tbody>
  {tableData?.map((el, i) => (
    <tr
      key={i}
      style={{ backgroundColor: select === i + 1 ? 'red' : undefined }}
    >
      <td>{el.SEQ}</td>
      <td>{el.PROD_CODE}</td>
      <td>{el.GRADE}</td>
      <td>{el.QTY}</td>
      <td>{el.PRODDAT}</td>
      <td>{el.JPSTSNAME}</td>
      <td>{el.OWNNAME}</td>
      <td>{el.COLORNAME}</td>
      <td>{el.JPSPEC}</td>
    </tr>
  ))}
</tbody>

<input onChange={handleSelectedLine} />
</>
)
Johnny Missile0
Related