Passing props to a Function as a Child component - reactjs

Question

This works, but I need to separate out the cellRenderer component.
// Grid.js
import React, { Component } from "react";
class Grid extends Component {
render() {
const index = 3;
return (
<div style={{ height: "5em", width: "6em", border: "1px solid black" }}>
{this.props.text}
{this.props.children({ index, cellText: "no." })}
</div>
);
}
}
export default Grid;
And App.js. If I click on "no.3", it correctly logs "x: 6"
import React, { Component } from "react";
import Grid from "./Grid";
class App extends Component {
constructor(props) {
super(props);
this.state = {
x: 5
};
}
handleIncrement = () => {
this.setState(
state => ({ x: state.x + 1 }),
() => console.log(`x: ${this.state.x}`)
);
};
cellRenderer = ({ index, cellText }) => {
return <div onClick={() => this.handleIncrement()}>{cellText + index}</div>;
};
render() {
return (
<div className="App">
<Grid text={"Hello "}>{this.cellRenderer}</Grid>
</div>
);
}
}
export default App;
Now, if I have to separate out cellRenderer component as below, how can I pass the handleIncrement function to it ?
import React, { Component } from "react";
import Grid from "./Grid";
const cellRenderer = ({ index, cellText }) => {
return <div>{cellText + index}</div>;
};
class App extends Component {
constructor(props) {
super(props);
this.state = {
x: 5
};
}
handleIncrement = () => {
this.setState(
state => ({ x: state.x + 1 }),
() => console.log(`x: ${this.state.x}`)
);
};
render() {
return (
<div className="App">
<Grid text={"Hello "}>{cellRenderer}</Grid>
</div>
);
}
}
Edit:
This works:
// pass handleIncrement to Grid
<Grid text={"Hello "} handleIncrement={this.handleIncrement} >{cellRenderer}</Grid>
// And within Grid, pass it to cellRenderer
{this.props.children({ index, cellText: "no.", handleIncrement: this.props.handleIncrement })}
// Update cellRenderer to this
const cellRenderer = ({ index, cellText, handleIncrement }) => {
return <div onClick={handleIncrement}>{cellText + index}</div>;
};
But the problem is that Grid is a component from the library react-window, and I cannot override the library code. Any other way possible ?

Answer 1

The fact that you have separated our cellRenderer as a functional component, you could render it as a component and pass on the props
const CellRenderer = ({ index, cellText, handleIncrement }) => {
return <div onClick={handleIncrement}>{cellText + index}</div>;
};
...
return (
<div className="App">
<Grid text={"Hello "}>{({index, cellText}) => <CellRenderer handleIncrement={this.handleIncrement} index={index} cellText={cellText}/>}</Grid>
</div>
);

Answer 2

This will work:
import React, { Component } from 'react'
import Grid from './components/Grid'
const CellRenderer = ({ index, cellText, handleIncrement }) => {
return <div onClick={handleIncrement}>{cellText + index}</div>
}
class App extends Component {
constructor(props) {
super(props)
this.state = {
x: 5
}
}
handleIncrement = () => {
this.setState(
state => ({ x: state.x + 1 }),
() => console.log(`x: ${this.state.x}`)
)
}
render() {
return (
<div className="App">
<Grid text={'Hello '}>
{props => (
<CellRenderer {...props} handleIncrement={this.handleIncrement} />
)}
</Grid>
</div>
)
}
}
export default App