2 replies

Mobx-state-tree action is undefined when passed to onPress

Link to full code of current branch
With mobx-state-tree, can you not use actions as functions for onPress?

Error on ExpoGo: Uncaught Error player.removeLifePoints is not a function (it is undefined)

const RemoveLifePointsButton = (player: Player) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

const RemoveLifePointsButton = (player: Player) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

Here is the Player model I have prototyped.

export const PlayerModel = types
  .model("Player")
  .props({
    playerID: types.identifierNumber,
    playerName: "Player",
    lifePoints: types.number,
    color: types.enumeration(["red", "green", "pink", "blue"]),
    playerIcon: types.enumeration(["assets/icons/bell.png", "assets/icons/lock.png"]),
  })
  .actions(withSetPropAction)
  .actions((player) => ({
    addLifePoints(amount: number) {
      player.lifePoints += amount;
    },
    removeLifePoints(amount: number) {
      player.lifePoints -= amount;
    },
  }))
  .views((player) => ({
    get playerInfo() {
      const defaultValue = { name: player.playerName, id: player.playerID };

      return defaultValue;
    }
  }))

export const PlayerModel = types
  .model("Player")
  .props({
    playerID: types.identifierNumber,
    playerName: "Player",
    lifePoints: types.number,
    color: types.enumeration(["red", "green", "pink", "blue"]),
    playerIcon: types.enumeration(["assets/icons/bell.png", "assets/icons/lock.png"]),
  })
  .actions(withSetPropAction)
  .actions((player) => ({
    addLifePoints(amount: number) {
      player.lifePoints += amount;
    },
    removeLifePoints(amount: number) {
      player.lifePoints -= amount;
    },
  }))
  .views((player) => ({
    get playerInfo() {
      const defaultValue = { name: player.playerName, id: player.playerID };

      return defaultValue;
    }
  }))

As I dig into it more, I think it might be I am misunderstanding how to use the setter actions like with .actions(withSetPropAction), but reading the docs on it, I still am struggling to understand.

GitHub

GitHub - mchisolm0/CountApp at player-grid

Contribute to mchisolm0/CountApp development by creating an account on GitHub.

Auto-Generated Property Setter Actions · MobX-state-tree

This recipe was originally developed by Infinite Red.

Solution

Okay, I’ve got it working. I needed to switch back to passing the player using

player={player}

player={player}

and then set up the typing for the props using interface.

interface AddLifePointsButtonProps {
  player: Player
}
interface RemoveLifePointsButtonProps {
  player: Player
}

// TODO Finish making buttons with both +5/+1 and minus
const RemoveLifePointsButton: React.FC<RemoveLifePointsButtonProps> = ({player}) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

const AddLifePointsButton: React.FC<AddLifePointsButtonProps> = ({player}) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.addLifePoints(1)}
        RightAccessory={(props) => <Icon style={props.style} icon="caretRight" />}
        text={"+1.o"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.addLifePoints(5)}
        RightAccessory={(props) => <Icon style={props.style} icon="caretRight" />}
        text={"+5"}
      />
    </>
  )
}

interface AddLifePointsButtonProps {
  player: Player
}
interface RemoveLifePointsButtonProps {
  player: Player
}

// TODO Finish making buttons with both +5/+1 and minus
const RemoveLifePointsButton: React.FC<RemoveLifePointsButtonProps> = ({player}) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

const AddLifePointsButton: React.FC<AddLifePointsButtonProps> = ({player}) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.addLifePoints(1)}
        RightAccessory={(props) => <Icon style={props.style} icon="caretRight" />}
        text={"+1.o"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.addLifePoints(5)}
        RightAccessory={(props) => <Icon style={props.style} icon="caretRight" />}
        text={"+5"}
      />
    </>
  )
}

If someone is willing to help me understand why this is better or different than setting the type inside the component definition, I would appreciate it.

Jump to solution

Mobx-state-tree action is undefined when passed to onPress

const RemoveLifePointsButton = (player: Player) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

const RemoveLifePointsButton = (player: Player) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

Here is the Player model I have prototyped.

export const PlayerModel = types
  .model("Player")
  .props({
    playerID: types.identifierNumber,
    playerName: "Player",
    lifePoints: types.number,
    color: types.enumeration(["red", "green", "pink", "blue"]),
    playerIcon: types.enumeration(["assets/icons/bell.png", "assets/icons/lock.png"]),
  })
  .actions(withSetPropAction)
  .actions((player) => ({
    addLifePoints(amount: number) {
      player.lifePoints += amount;
    },
    removeLifePoints(amount: number) {
      player.lifePoints -= amount;
    },
  }))
  .views((player) => ({
    get playerInfo() {
      const defaultValue = { name: player.playerName, id: player.playerID };

      return defaultValue;
    }
  }))

export const PlayerModel = types
  .model("Player")
  .props({
    playerID: types.identifierNumber,
    playerName: "Player",
    lifePoints: types.number,
    color: types.enumeration(["red", "green", "pink", "blue"]),
    playerIcon: types.enumeration(["assets/icons/bell.png", "assets/icons/lock.png"]),
  })
  .actions(withSetPropAction)
  .actions((player) => ({
    addLifePoints(amount: number) {
      player.lifePoints += amount;
    },
    removeLifePoints(amount: number) {
      player.lifePoints -= amount;
    },
  }))
  .views((player) => ({
    get playerInfo() {
      const defaultValue = { name: player.playerName, id: player.playerID };

      return defaultValue;
    }
  }))

As I dig into it more, I think it might be I am misunderstanding how to use the setter actions like with .actions(withSetPropAction), but reading the docs on it, I still am struggling to understand.

GitHub

GitHub - mchisolm0/CountApp at player-grid

Contribute to mchisolm0/CountApp development by creating an account on GitHub.

Auto-Generated Property Setter Actions · MobX-state-tree

This recipe was originally developed by Infinite Red.

Solution

Okay, I’ve got it working. I needed to switch back to passing the player using

player={player}

player={player}

and then set up the typing for the props using interface.

interface AddLifePointsButtonProps {
  player: Player
}
interface RemoveLifePointsButtonProps {
  player: Player
}

// TODO Finish making buttons with both +5/+1 and minus
const RemoveLifePointsButton: React.FC<RemoveLifePointsButtonProps> = ({player}) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

const AddLifePointsButton: React.FC<AddLifePointsButtonProps> = ({player}) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.addLifePoints(1)}
        RightAccessory={(props) => <Icon style={props.style} icon="caretRight" />}
        text={"+1.o"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.addLifePoints(5)}
        RightAccessory={(props) => <Icon style={props.style} icon="caretRight" />}
        text={"+5"}
      />
    </>
  )
}

interface AddLifePointsButtonProps {
  player: Player
}
interface RemoveLifePointsButtonProps {
  player: Player
}

// TODO Finish making buttons with both +5/+1 and minus
const RemoveLifePointsButton: React.FC<RemoveLifePointsButtonProps> = ({player}) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(1)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-1"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.removeLifePoints(5)}
        LeftAccessory={(props) => <Icon style={props.style} icon="caretLeft" />}
        text={"-5"}
      />
    </>
  )
}

const AddLifePointsButton: React.FC<AddLifePointsButtonProps> = ({player}) => {
  return (
    <>
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.addLifePoints(1)}
        RightAccessory={(props) => <Icon style={props.style} icon="caretRight" />}
        text={"+1.o"}
      />
      <Button
        style={{ marginVertical: spacing.sm }}
        onPress={() => player.addLifePoints(5)}
        RightAccessory={(props) => <Icon style={props.style} icon="caretRight" />}
        text={"+5"}
      />
    </>
  )
}

If someone is willing to help me understand why this is better or different than setting the type inside the component definition, I would appreciate it.

Jump to solution

Mobx-state-tree action is undefined when passed to onPress

Mobx-state-tree action is undefined when passed to onPress

Similar Threads

Similar Threads

Similar Threads