So I'm looking through several SO questions and each example pertains to a Class based ponent not a functional ponent.
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 ponents 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
So I'm looking through several SO questions and each example pertains to a Class based ponent not a functional ponent.
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 ponents 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
3 Answers
Reset to default 9What 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.
Just do:
List.defaultProps = {
toggleDrawer: function () {
// enter code here
}
}
or arrow functions:
List.defaultProps = {
toggleDrawer: () => {
// enter code here
}
}
You can also write like this concise style :
List.defaultProps = {
toggleDrawer() {}
};