Can't binding reference this in React - reactjs

Question

Im trying to create a ReactList that contains the activities on state, but i can't manage to reference the variable state from inside renderItemOtherActi when called as
itemRenderer={this.renderItemOtherActi}
I tryed using
itemRenderer={::this.renderItemOtherActi}
or
itemRenderer={this.renderItemOtherActi.bind(this)}
but nothing worked, I'm sure it's a really dumb mistake, sorry in advance im new in JSX. Thanks a lot!
import React from 'react';
import ReactList from 'react-list';
import './css/bootstrap.min.css';
import './css/small-business.css';
import Navbar from './Navbar';
import Footer from './Footer';
class Activity_Page extends React.Component {
state = {
my_activities: [
{
name:"Yoga"
},
{
name:"Crossfit"
}],
other_activities: [
{
name:"Zamba"
},
{
name:"Spinnig"
}]
};
return_state(){
return this.state;
}
renderItemMyActi(index, key) {
return <div key={key}>Yoga</div>;
}
renderItemOtherActi(index, key) {
return <div key={key}>{this.state.my_activities[index].name}</div>;
}
render() {
return (
<div>
<Navbar />
<div className="Activity_Page container">
<div className="row">
<div className="col-lg-10">
<h3>Actividades a las que estoy inscripto</h3>
<div style={{overflow: 'auto', maxHeight: 400}}>
<ReactList
itemRenderer={this.renderItemMyActi}
length={this.state.my_activities.length}
type='uniform'
/>
</div>
<h3>Actividades a las que no estoy inscripto</h3>
<div style={{overflow: 'auto', maxHeight: 400}}>
<ReactList
itemRenderer={this.renderItemOtherActi}
length={this.state.other_activities.length}
type='uniform'
/>
</div>
</div>
</div>
<footer className="Footer">
<div className="row">
<div className="col-lg-12">
<Footer />
</div>
</div>
</footer>
</div>
</div>
);
}
}
export default Activity_Page;

Answer 1

you either
bind it in the constructor:
constructor(props){
super(props);
this.renderItemOtherActi=this.renderItemOtherActi.bind(this);
}
or use arrow function
renderItemOtherActi = (index, key) => {
// ...
}