React Native: filtering props?

Question

I created a basic component such as:

export default (props) => (
  <TouchableOpacity {...props} style={styles.button}>
    {props.title && <Text style={styles.text}>{props.title}</Text>}
    {props.icon && <Icon name={props.icon} />}
  </TouchableOpacity>
);

I can then call it with <Component title="Home" icon="home" /> for instance.

The problem is that passing {...props} to TouchableOpacity generate errors because it does not recognize title nor icon properly. For instance: JSON value 'Home' of type NSString cannot be converted to...

Is there a way to filter props so that I only pass valid ones for TouchableOpacity?

Answer 1

Transferring Props

Sometimes it's fragile and tedious to pass every property along. In that case you can use destructuring assignment with rest properties to extract a set of unknown properties. List out all the properties that you would like to consume, followed by ...other.

var { checked, ...other } = props;

This ensures that you pass down all the props EXCEPT the ones you're consuming yourself.

function FancyCheckbox(props) {
  var { checked, ...other } = props;
  var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
  // `other` contains { onClick: console.log } but not the checked property
  return (
    <div {...other} className={fancyClass} />
  );
}
ReactDOM.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById('example')
);

Answer 2

Like Paul Mcloughlin, I would recommend using object destructuring along with a rest parameter . You can destructure your props object directly in your function parameters like so:

({title, icon, ...remainingProps}) => (...)

This extracts the title and icon props from your props object and passes the rest as remainingProps .

Your complete component would be:

export default ({title, icon, ...remainingProps}) => (
  <TouchableOpacity {...remainingProps} style={styles.button}>
    {title && <Text style={styles.text}>{title}</Text>}
    {icon && <Icon name={icon} />}
 </TouchableOpacity>
);