ReactJS adding a data to a specific row from my custom table

Question

I have a table in my application in which I rendered the rows using a loop. Now I have a problem regarding inserting data into my specific row.

My idea in my application is, I have a loop that renders 31 rows of my table, and every time the user clicks the specific row, a modal will show that lets the user to input some data and I want the data back to the specific row which the user clicks and inserted on <td> tags from a specific row.

Here is what I've done so far:

Here is my row component which I want to put some data :

const Date_columns = (props) => {
        const [hovered, setHovered] = useState(false);      

        const toggleHover = () => {
            setHovered((prevState) => (!prevState));            
        }        
        
        return (
            <>
              <tr onClick={() => handleShowModal(selectedMY, props.date_column)} onMouseEnter={toggleHover} onMouseLeave={toggleHover} className={hovered ? `${classes.trHover}`:''}>
                  <td align="center" className={`${classes.borderBlack}`}>{props.date_column}</td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
              </tr>
            </>
        )
    }

Here is how I rendered my rows:

{(() => {
    const rows = [];
    for (let i = 1; i <= 31; i++) {
        rows.push(<Date_columns key={i} date_column={i} />);
    }
    return rows;
})()}

How can I make a condition to insert only from a specific row based on key or date_column prop?

Answer 1

For your use case, you can use a ternary operator inside your for loop like:

{(() => {
    const rows = [];
    for (let i = 1; i <= 31; i++) {
        i = "1" ? rows.push(<Date_columns key={i} date_column={i} />) : rows.push(<Date_columns key={i} />) 
    }
    return rows;
})()}

Check the value of i and based on that render your <Date_column> component.