Default function props in functional component

Question

So I'm looking through several SO questions and each example pertains to a Class based component not a functional component.

So I have a Container ListContainer that renders List and I'm passing toggleDrawer(). I'm unable to define toggleDrawer() in the List.defaultProps

ListContainer.jsx

import React, { Component } from 'react';
import List from './List';

class ListContainer extends Component{
  constructor(props){...}
  const toggleDrawer = () => {...}
  render(){
    return(
      <List data={data} toggleDrawer={toggleDrawer}/>
    )
  }
}

...export statement...

List.jsx

import React from 'react';
import PropTypes from 'prop-types';

function List(props){
  const { data, toggleDrawer } = props;
  const openDrawer = () => toggleDrawer();
  const renderListItems = (items) => {//renders a list};

  return(
    <ul>{renderListItems(data)}</ul>
  )
}

List.propTypes = {
  toggleDrawer: PropTypes.func,
};

List.defaultProps = {
  toggleDrawer: <<<<<<<<<<<<<<<< Not sure how to define toggleDrawer() here
}

...export statement...

The problem I'm running into is I've tried using getDefaultProps() and maybe it's not being implemented correctly but that hasn't worked. All the examples I've looked at are using State components and so trying to use .bind(this) or this.toggleDrawer.this(bind) or any of the other examples I've tried aren't working either.

What am I missing here? Or would it be better practice to just have toggleDrawer: PropTypes.func.isRequired. That does remove the ESLint error, but I'm not 100% on that function always being required

Answer 1

What you probably want is a noop:

List.defaultProps = { toggleDrawer: () => {} };

The advantage of this is that you can be sure that this.props.toggleDrawer is a function even if no value was specified, which means you can safely call it without checking. Another alternative is to set the default to null, and then check that the prop is a function before calling it:

if(typeof this.props.toggleDrawer === 'function') { /* call function */ }

For the record it doesn't make much sense to define another callback (openDrawer()) which simply calls toggleDrawer. You may as well just call toggleDrawer directly.

Answer 2

Just do:

List.defaultProps = {
  toggleDrawer: function () {
    // enter code here 
  }
}

or arrow functions:

List.defaultProps = {
  toggleDrawer: () => {
    // enter code here 
  }
}