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 `{actionColumn(row.id)}`. Or make the `actionColumn` a component where the row ID is a prop — Jayce444, May 12 '21 at 02:37

score 1 · Answer 1 · answered May 12 '21 at 02:44

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

score 0 · Accepted Answer · answered May 12 '21 at 02:36

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>.

Hello Sir, could you help me on this one https://stackoverflow.com/questions/67498940/input-field-losing-focus-on-each-character-type-react — Aayush Dahal, May 12 '21 at 10:28

How to replace jsx substring of a props - react

2 Answers2