Passing code block as a prop to add to an array

Question

I have a very niche issue where I am trying to pass a block of executable code as a prop options. The prop looks like this...

columns={[
    {
        name: "Fund Name",    //Title
        width: "40%",         //Colum Width
        options: {[           
            var splitValue = value.split("//");
            return (
                <div className="fundName">{splitValue[0]}<p>{splitValue[1]}</p></div>
            );
        ]}
    }, {
        name: "Review Date",
        width: "20%"
    }, {
        name: "Company Debt",
        width: "20%"
    }, {
        name: "Alerts",
        width: "10%",
        options: {[
            return <Alerts {data: value} />
        ]}
    }
}

So sometimes there are some variables and additional code and sometimes it may just be returning a component. Anyway. I need the code to look like this in the component...

const columns = [{
    name: "Fund Name",
    options: {
        customBodyRender: (value, tableMeta, updateValue) => {
            var splitValue = value.split("//");
            return (
                <div className="fundName">{splitValue[0]}<p>{splitValue[1]}</p></div>
            );
        }
    }
}, {
    name: "Review Date"
}, {
    name: "Company Debt"
}, {
    customBodyRender: (value, tableMeta, updateValue) => {
        return <Alerts {data: value} />
    }
}];

So firstly. Is this possible? can I pass variables like the splitValue, and, will it pick up that the passed in "value" variable is to be associated with the customBodyRender: (value,.... variable?

Here is my attempt but it is throwing a lot of errors. I feel I may be close if it even at all possible....

let columns = this.props.columns.map(item =>
    item.options
    ? ({ ...item, options: { customBodyRender: (value, tableMeta, updateValue) => { eval(item.options) }} })
    : item
);

Thanks

score 0 · Answer 1 · edited Apr 27 '20 at 16:12

You can't use code directly in data structures because there is simply no syntax for this (in js generally) and ...

"The argument of the eval() function is a string."

Write code as strings? OK, you can. Problem here? JSX is transpiled into normal Javascript code (using bable). eval won't do that.

Is it possible to use JSX from running code with eval? Yes, you can using babel or other libs.

Of course using/storing functions is a preferred (safer) way for this kind of jobs.

Passing code block as a prop to add to an array

1 Answers1