React Native binding functions over .map()

Question

So I am having some trouble combining concepts of .map() and function binding. I am using .map() in the same way ngFor is used in angular, to place a custom button component on the page for every item in a user's account.

Here is some example code:

class MyButton extends Component {
  constructor(props) {
    super();
    this.state = {
      progress: 0
    }
  }

  render() {
    return(
      <TouchableWithoutFeedback onPress={this.pressFunction}>
        (...more code inside)
      </TouchableWithoutFeedback>
    )
  }

  pressFunction = () => {
    (animate progress from 0 to 1 for some animation)
  }
}

/////////////////////////////////////////////////////////////////

class Parent extends Component {
  render() {
    return(
      {
        this.props.data.array.map(obj => {
          return(
            <View style={someStyle}>
              <MyButton data={obj} />
            </View>
          )
        })
      }
    )
  }
}

So in the Parent Component, multiple MyButtons are rendered properly, each according to the passed object from the array. However, when any button is pressed, all of the pressFunctions for all MyButtons fire.

My question is I guess, how do I ensure that each pressFunction of each MyButton is bound only to the specific instance of the MyButton? I am having trouble with the scope here.

My understanding is that

functionName = () => {}

should properly bind the function to the instance, but I have tried the older ways as well with the same result.

"However, when any button is pressed, all of the pressFunctions for all MyButtons fire." Why do you think like that? — devserkan
– devserkan, Commented Aug 28, 2018 at 20:44
should properly bind the function to the instance, but I have tried the older ways as well with the same result - this means that the problem isn't related to binding to wrong instance, doesn't it? — Estus Flask
– Estus Flask, Commented Aug 28, 2018 at 21:11
devserkan not sure about what you mean haha. estus, I am not sure, that is why I am asking. I cannot think what other issues might cause this problem unless there is something I am missing with the scope — 1pocketaces1
– 1pocketaces1, Commented Aug 28, 2018 at 21:33
I am hoping maybe someone has crossed this issue and solved it themselves before — 1pocketaces1
– 1pocketaces1, Commented Aug 28, 2018 at 21:34
You are saying when you press any button all of the pressFunctions fires. How? This is not normal. Each component instance owns its function here. — devserkan
– devserkan, Commented Aug 28, 2018 at 21:47

1pocketaces1 · Accepted Answer · 2018-08-29 03:10:16Z

1

I solved this by creating a dynamic ref on each object mapped to a MyButton, using a unique property of each obj in the array:

this.props.data.array.map(obj => {
  return(
    <View style={someStyle}>
      <MyButton ref={obj.name} data={obj} />
    </View>
  )
})

Still don't know why my it didn't bind uniquely without a ref

answered Aug 29, 2018 at 3:10

1pocketaces1

1471 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nakib · Accepted Answer · 2018-08-28 21:32:58Z

0

You should pass onPress as a props. Below is the updated code

class MyButton extends Component {
  constructor(props) {
    super();
    this.state = {
      progress: 0
    }
  }

  render() {
    return(
      <TouchableWithoutFeedback onPress={this.props.onPress}>
        (...more code inside)
      </TouchableWithoutFeedback>
    )
  }
}

/////////////////////////////////////////////////////////////////

class Parent extends Component {
  pressFunction = () => {
    (animate progress from 0 to 1 for some animation)
  }
  render() {
    return this.props.data.array.map(obj => {
      return(
        <View style={someStyle}>
          <MyButton 
            data={obj} 
            onPress={this.pressFunction}
          />
        </View>
      )
    })
  }
}

answered Aug 28, 2018 at 21:32

Nakib

4,7337 gold badges26 silver badges46 bronze badges

2 Comments

1pocketaces1 Over a year ago

If I do that can I animated the state.progress of the individual buttons separately? Each MyButton has its own animation controlled by its own this.state.progress, and the pressFunction must be able to access this value

1pocketaces1 Over a year ago

I am working on a solution to dynamically define a ref for each MyButton that is generated, but am not sure if that will work

Collectives™ on Stack Overflow

React Native binding functions over .map()

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related