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?

Harsh Patel · Accepted Answer · 2021-10-14 03:42:39Z

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.

answered Oct 14, 2021 at 3:42

Harsh Patel

6,87810 gold badges44 silver badges77 bronze badges

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

2 Comments

Jc John Over a year ago

Do i need to declare a state to put some values inside my td ?

Harsh Patel Over a year ago

That's up to you, if you want to manage it by storing into a state then you can.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related