How to call function in map loop (react native)?

Question

This is my code. I am not sure what error exists.

When I click the image button, it calls proper function exactly. If I click the first button, it calls toggleBooks() function correctly. Then in that function, I want to use vidMute state value.

So I tried console.log('Video toggle', this.state.vidMute); then it gives me an error like the following image.

But if I print console.log('Video toggle'), then it works well. How to use state value in that function?

export default class Video extends Component {
    constructor(props) {
        super(props)
        this.state = {
            vidMute: false,
            audioShow: false,
            callShow: false,
            btn: [
                { func: this.toggleAudio, url: magic, de_url: de_magic },
                { func: this.endCall, url: endcall, de_url: de_endcall },
                { func: this.toggleBooks, url: camerarotate, de_url: de_camerarotate },
            ],
        };
    this.toggleAudio = this.toggleAudio.bind(this)
    this.endCall = this.endCall.bind(this)
    this.toggleBooks = this.toggleBooks.bind(this)
    }

    toggleBooks() {
        console.log('Video toggle', this.state.vidMute);
    }
    endCall() {
        console.log('Call toggle', this.state.audioShow);
    }
    toggleAudio() {
        console.log('Audio toggle', this.state.callShow);
    }

    render() {
        return (
            <View>
                {
                    this.state.btn.map((item, index) => (
                        <TouchableOpacity key={index} style={styles.iconStyle} activeOpacity={0.4} onPress={item.func}>
                            <Image source={this.state.lockState ? item.de_url : item.url} style={{ width: 70, height: 70 }} />
                        </TouchableOpacity>
                    ))
                }
            </View>
        )
    }

}

Answer 1

this refers to the context of your function and not the context of your component. You can try to bind your method like this :

this.myMethod = this.myMethod.bind(this);

in your constructor.

Or use the fat arrow pattern (Highly recommanded) which automatically includes the binding to your component's context.

Here is a binding example on stackblitz

Here is the code :

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      items:[
        {name:"item 1", func: () => this.test()},
        {name:"item 2", func: () => this.test2()}
      ]
    };

    this.test = this.test.bind(this);
  }

  test() {
    console.log('Hi', this.state.name);
  }

  test2() {
    console.log('Hello', this.state.name); // Note this is not binded
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p onClick={this.test}>
          Start editing to see some magic happen :)
        </p>

        <div>
        {
          this.state.items.map(item => <div onClick={() => item.func()}>{item.name}</div>)
        }
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));