How to replace jsx substring of a props - react

Question

I am trying to create a shared table component. And, on this table I am trying to make those edit url dynamic. Code is straight forward and loos like:

const actionColumn = (
    <Link
        to={`/suppliers/ROW_ID/edit`}
        className="btn btn-info btn-xs"
        title="Edit"
    >
        <i className="fas fa-pencil-alt"></i>
    </Link>
);

    <Table
        actionColumn={actionColumn}
    />

Now on the table, I want to replace ROW_ID with the row.id

{list &&
    list.map((row, i) => (
         <tr>
            <td>
                {actionColumn.replace(
                    "ROW_ID",
                    row.id
                )}
            </td>
        </tr>
    ))}

I tried to use .replace but received an error: actionColumn.replace is not a function

A simple way is just to make actionColumn a function, and pass the row ID as an argument: const actionColumn = (ROW_ID) => (...) and then <td>{actionColumn(row.id)}</td>. Or make the actionColumn a component where the row ID is a prop — Jayce444
– Jayce444, Commented May 12, 2021 at 2:37

Cavdy · Accepted Answer · 2021-05-12 02:44:50Z

1

First you need to make ActionColumn a component that accepts the id as props... Then export the component

const ActionColumn = ({ id }) => (
    <Link
        to={`/suppliers/${id}/edit`}
        className="btn btn-info btn-xs"
        title="Edit"
    >
        <i className="fas fa-pencil-alt"></i>
    </Link>
);

export default ActionColumn;

In this component, you import the ActionColumn component and pass the row.id to it

{list &&
    list.map((row, i) => (
            <td>
                <ActionColumn id={row.id} />
            </td>
    ))}

answered May 12, 2021 at 2:44

Cavdy

6189 silver badges17 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2021-05-12 02:36:59Z

0

Make a function instead, one that takes the to prop to pass to the Link:

const ActionColumn = ({ to }) => (
    <Link
        to={to}
        className="btn btn-info btn-xs"
        title="Edit"
    >
        <i className="fas fa-pencil-alt"></i>
    </Link>
);

For your original layout, you can use

<ActionColumn to={`/suppliers/ROW_ID/edit`} />

To render differently, pass a different prop:

list.map((row, i) => (
    <td>
        <ActionColumn to={`/suppliers/${row.id}/edit`} />
    </td>
))

Also note that you need to balance your <tr> tags; you currently have a </tr> but no matching <tr>.

answered May 12, 2021 at 2:36

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

Aayush Dahal Over a year ago

Hello Sir, could you help me on this one stackoverflow.com/questions/67498940/…

Collectives™ on Stack Overflow

How to replace jsx substring of a props - react

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related