11032

Call a React Function from inside Render

Question:

I'm using this <a href="https://allenfang.github.io/react-bootstrap-table/example.html" rel="nofollow">table component</a> with radioboxes (Row selection(Single)) and I want to update the react state to the currently selected row.

A function called <strong>onRowSelect</strong> shows the row selected. To update the state to the row selected, I created a function called <strong>showRow()</strong>, which is called in onRowSelect. However, I keep getting a this.showRow() is not a function error.

I'm using showRow() outside the render function because I need to update the state with the currently chosen row.

class ChooseRowExample extends Component { constructor(props) { super(props); this.state =({ chosenRow:"" }); this.showRow = this.showRow.bind(this); } showRow(row, isSelected){ console.log(row); //update state here } render() { var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: onRowSelect }; function onRowSelect(row, isSelected){ this.showRow(row, isSelected); } return ( <div> <BootstrapTable data={person} search={true} selectRow={selectRowProp}> <TableHeaderColumn dataField="id" isKey={true}>Client #</TableHeaderColumn> <TableHeaderColumn dataField="name">Company</TableHeaderColumn> <TableHeaderColumn dataField="contact_name">Client Name</TableHeaderColumn> </BootstrapTable> </div> ) } }

Answer1:

The problem is that this within onRowSelect is not the instance of the component like you are expecting.

You can use an ES6 arrow function for a lexical this that will reference the component instance.

So instead of:

var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: onRowSelect }; function onRowSelect(row, isSelected){ this.showRow(row, isSelected); }

You should be able to do this:

var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: (row, isSelected) => this.showRow(row, isSelected) };

Or even simply the following as you have already bound showRow to the components context in the constructor :

var selectRowProp = { mode: "radio", clickToSelect: true, bgColor: "#A7EC57", onSelect: this.showRow };

Here is a bit more of an expanation of how this works in JavaScript: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this" rel="nofollow">https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this</a>

Recommend

  • Unable to save NSMutableArray of my class to file (IOS)
  • Search through Tab Control for specific Tab Item based on a String value
  • How to use Animated.diffClamp in react native
  • WPF auto resize elements
  • React textarea with value is readonly but need to be updated
  • Generic Types Return in Typescript
  • Javascript syntax null : ?{}
  • How to unit test a Angular 4 component which uses router.paramMap
  • SQLiteOpenHelper: onCreate() method not called on physical device
  • how to avoid the dependencies hell with unit test in angular 2+
  • Visual Studio not stopping on an exception being thrown
  • javascript array numerical key resulting in excess “undefined”
  • SearchView WITHOUT ACTIONBAR [duplicate]
  • Can you pass data to a test fixture just like you pass data to test cases?
  • Java inject implementation using TypeLiteral
  • Calling a constructor through reflection in scala 2.10
  • How can I reset dropdown data if modal closed on vue component?
  • Undefined navigator.push React-native 0.43.4
  • Why people use prototype in javascript when it is easy to inherit using apply () and call () methods
  • Blackberry 6: how to detect a long click on track pad?
  • unable to get jsonEncode in magento2
  • Knockout custom binding handler
  • Angularjs pass function from Controller to Directive (or call controller function from directive) -
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • Creating Java object from class name with constructor, which contains parameters [duplicate]
  • how to avoid repetitive constructor in children
  • How can I set a binding to a Combox in a UserControl?
  • Create DicomImage from scratch using Dcmtk
  • Highlight and Bold text in JTextPane
  • how to do an event when i swipe from fragment to the other
  • Deleting and Updating values from a cusrsor adapter
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Possible to stop flickering java tooltip in heavyweight mode?
  • Akka Routing: Reply's send to router ends up as dead letters
  • Angular 2 constructor injection vs direct access
  • How to get Windows thread pool to call class member function?
  • unknown Exception android
  • Is there any way to bind data to data.frame by some index?
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app