Pass ag-grid data from child to parent - reactjs

Question

New to react from angular
Receiving the error:
The above error occurred in the <div> component: in div
Consider adding an error boundary to your tree to customize error handling behavior.
I don't quite understand why div and what the error is talking about?
I am trying to click on a row and pass the values from row to parent.
In my top level parent component, I have a function that would set the value of the selected row and in the child, the selected row is pass to props.
Parent:
class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
activeItem: []
}
this.setActiveItem = this.setActiveItem.bind(this)
}
setActiveItem = userSelect => {
this.setState({ activeItem: userSelect })
}
render(){
<Child activeItem={this.setActiveItem}/>
}
In my child, I use ag-grid using onRowClicked. The error is getting thrown in this.props.setActiveItem(event.data)
class Child extends React.Component {
constructor(props) {
super(props)
}
onRowClicked = event => {
//eslint-disable-next-line no-console
console.log('tester', event.data) //okay, shows data
this.props.setActiveItem(event.data) //not okay, throws error
}
grid = () => {
return (
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.data}
onRowClicked={this.onRowClicked}
/>
)
}
render() {
if (this.state.data.length > 0) {
return <div className="ag-mod">{this.grid()}</div>
}
return <br />
}
}
//also here's the prop for child
Child.propTypes = {
setActiveItem: PropTypes.func
}

Answer 1

You are passing down setActiveItem from parent to child as activeItem.
<Child activeItem={this.setActiveItem}/>
So in child call it with the name you gave in when passing it down.
onRowClicked = event => {
//eslint-disable-next-line no-console
console.log('tester', event.data) //okay, shows data
this.props.activeItem(event.data) //not okay, throws error
}
Also, consider wrapping your components in an error boundary as the error mentioned. It helps. You can read about that here