TheJediCowboy TheJediCowboy - 4 months ago 13
React JSX Question

Calling a React function PropType from outside the class definition

I have the following React Component..

import React, { Component,PropTypes } from 'react';
import RequestListItem from '../RequestListItem';
import { ScrollView,Text,View } from 'react-native';

class RequestList extends Component {


render(){
return (
<ScrollView
onScroll={() => { console.log('onScroll!'); }}
automaticallyAdjustContentInsets={false}
scrollEventThrottle={200}>
{this.props.requests.map(mapRequests)}
</ScrollView>
);
}
}

RequestList.propTypes = {
requests: PropTypes.array.isRequired,
onRequestItemClick: PropTypes.func.isRequired
};

var mapRequests = (request, i) => {
<RequestListItem
id={request.id}
title={request.title}
onRequestItemClick={this.props.onRequestItemClick.bind(this)}
/>
};

export default RequestList;


The problem I am having is concerning the
mapRequest
function. I need to be able to invoke the
onRequestItemClick
that is passed in as a property to this component,but since this is defined outside of the class definition, it doesn't appear I have access to the properties. How do I accomplish what the code above is trying to do?

Answer

You can pass the callback to the mapRequests method, instead of trying to pull it directly from the props:

class RequestList extends Component {
  constructor(props) {
      super(props);

      this.props.onRequestItemClick = this.props.onRequestItemClick.bind(this) // I'm not sure why your binding to this something you got from the props, so consider removing this line
  }

  render(){
    return (
      <ScrollView
        onScroll={() => { console.log('onScroll!'); }}
        automaticallyAdjustContentInsets={false}
        scrollEventThrottle={200}>
        {this.props.requests.map((request) => mapRequests(request, this.props.onRequestItemClick))} // the arrow function calls mapRequest, and passes the request and the callback 
      </ScrollView>
    );
  }
}

var mapRequests = (request, onRequestItemClick) => {
  <RequestListItem
      id={request.id}
      title={request.title}
      onRequestItemClick={onRequestItemClick}
  />
};

However, if you already use an anonymous function, you don't need mapRequests function anyway:

class RequestList extends Component {
  constructor(props) {
      super(props);

      this.props.onRequestItemClick = this.props.onRequestItemClick.bind(this) // I'm not sure why your binding to this something you got from the props, so consider removing this line
  }

  render(){
    return (
      <ScrollView
        onScroll={() => { console.log('onScroll!'); }}
        automaticallyAdjustContentInsets={false}
        scrollEventThrottle={200}>
        {this.props.requests.map((request) => (
            <RequestListItem
                id={request.id}
                title={request.title}
                onRequestItemClick={this.props.onRequestItemClick}        
            />
        )}
      </ScrollView>
    );
  }
}