Delegate Pattern in React - how to achieve it? - reactjs

Question

I'm mostly a C++ developer and I'm having a hard time understanding how can I create something as a 'Delegate' in React.
What I wanna achieve: Pass a custom component to a Table Component that has the required code to edit the data on a table cell correctly.
on my mainApp:
<TableComponent
headerData=["first", "second", "third"]
rowEditDelegates=[<input/>, <button></button>, <combobox/>]
/>
The code is much shorter for brievety.
class TableComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
editDelegates = this.props.rowEditDelegates;
displayEditors = false;
}
onEditToogled() {
/* Here I have no idea how to get the editDelegates
and pass data to it. */
setState({displayEditors : true});
}
}
render() {
let row = null;
if(this.state.displayEditors) {
row = this.state.editDelegates.map((item) => <td> {item} </td>)
} else {
row = this.props.bodyData.map((item) => <td> {item} </td>)
}
}
};
I cannot access the delegate's methods because it's a rendered component, and I didn't understand how to work with a component "pointer" (I don't even know if it exists), maybe my problem needs a different mindset than a c++ programmer one.

Answer 1

You have couple of options here:
1) Use cloneElement function:
onEditToogled()
{
setState({displayEditors : true});
}
render()
{
let row = null;
if(this.state.displayEditors)
{
row = this.state.editDelegates.map((item) => {
var alteredElement = React.cloneElement(item, {className: "newPropertyValue"});
return (<td> {alteredElement} </td>);
});
}
else
{
row = this.props.bodyData.map((item) => <td> {item} </td>)
}
}
2) Change the way how you pass the editor components, for example:
<TableComponent
headerData=["first", "second", "third"]
rowEditDelegates=[(props) => <input {...props}/>, (props) => <button {...props}/>, (props) => <combobox {...props}/>]
/>
And later:
render() {
let row = null;
if(this.state.displayEditors) {
row = this.state.editDelegates.map((itemFunc) => <td> {itemFunc({className: "newPropertyValue"})} </td>)
} else {
row = this.props.bodyData.map((itemFunc) => <td> {itemFunc()} </td>)
}
}
As a side note.
I do not think there is a need for you to copy and keep your "delegates" in state. They are unlikely to change? If so - just leave them in props.