maxs15 / maxs15/react-native-modalbox

Cannot pass props to modal 'TypeError: Cannot read property of 'showEditModal' of undefined'

Open
#213 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
2.9k
Forks
496
PR merge metrics
No merged PRs in 30d

Description

Firstly, I'd like to thank you for this component - it's extremely useful.

I have an issue: I am trying to create touchable list items that, when pressed, show a modal to view and edit information.

However, if I call the onPressEdit function and pass it props as an argument I receive error:
TypeError: Cannot read property of 'showEditModal' of undefined

But I can call onPressEdit without passing arguments and it correctly opens the modal. Am I missing something here please guys? Any help would be greatly appreciated.

At present I have:
Food.js - renders flat list
TrackedItem.js - returns each item in the list
EditModal.js

Food.js

  constructor(props) {
    super(props);
    this.state = {
    };
    this.onPressEdit = this.onPressEdit.bind(this);
  }

onPressEdit = name => {
  this.refs.editModal.showEditModal(name);
}
....
render() {
  return(
      <FlatList
              data={this.state.foods}
              renderItem={({ item }) =>
                <TrackedItem
                  {...item}
                  onPress={this.onPressEdit}
                />
              }
              keyExtractor={(item, index) => index.toString()}
          />
      <EditModal ref={'editModal'} parentFlatList={this} />
  )
}

TrackedItem.js

<ListItem
  title={this.props.name}
  onPress={this.props.onPress(this.props.name)}
/>

EditModal.js

showEditModal = name => {
  this.refs.editModal.open();
  this.setState({ name });
}

<Modal
  ref={'editModal'}
  position='top'
>

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in TrackedItem.js and inspect how ListItem receives the onPress prop, then trace it back to Food.js and onPressEdit. Reproduce the error with the provided FlatList and modal setup; done means pressing an item passes its name without triggering the undefined-property error and opens EditModal as intended.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.