CODEWITHSUNDEEP
reactjs
romss182
romss182

Reputation: 203

React : is there a way to console.log all props passed down to a stateless component?

For a class component, one would console.log "this.props" and get all the props. What would be the equivalent for a stateless/functional component?

For example, in the following component, how can one see all props quickly ? (particularly those offered by withRouter)

const CollaboratorListContainer = ({
  searchTerm,
  handleFilterChange,
  visibleFilters,
  setVisibleFilters,
  deleteCollaborators,
  companyId,
  title,
}) => {
  return(
    <Grid fluid>
      <MainContentHeader
         title={'Collaborateurs'}
      />
      <div className="main-content">
        <Card>
          <ListFilterForm
            onFilterChange={handleFilterChange}
            values={{ searchTerm }}
            visible={visibleFilters} text  />
        <CollaboratorList
            deleteCollaborators={deleteCollaborators}
            onRowSelect={(inSelection) => setVisibleFilters(!inSelection)}
            companyId={companyId}
            searchTerm={searchTerm} />
        </Card>
      </div>
    </Grid>
 )
}


export default compose(
  withRouter,
  searchTerm,
  visibleFilters,
  handlers,
  pure
)(CollaboratorListContainer);

Upvotes: 1

Views: 7911

Answers (2)

luish
luish

Reputation: 121

I think you can achieve that using recompose.lifecycle():

https://github.com/acdlite/recompose/blob/master/docs/API.md#lifecycle

Yes it works, I've tested now doing this:

import { compose, lifecycle } from 'recompose';

const log = lifecycle({
  componentDidMount() {
    console.log('all props', this.props);
  },
});

export default compose(
  injectIntl,
  withRouter,
  log,
)(Container);

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281646

In the stateless functional components, the props can be obtained from the function argument like

const MyComp = (props) => {
   return <div>Hello {props.name}</div>
}

In case you want to see specific props, you can destructure it separately but there is not no way of knowing the props added by a specific HOC

const CollaboratorListContainer = ({
  match,
  location,
  history,
  searchTerm,
  handleFilterChange,
  visibleFilters,
  setVisibleFilters,
  deleteCollaborators,
  companyId,
  title,
}) => {
  console.log(match, location, history);
  return(
    <Grid fluid>
      <MainContentHeader
         title={'Collaborateurs'}
      />
      <div className="main-content">
        <Card>
          <ListFilterForm
            onFilterChange={handleFilterChange}
            values={{ searchTerm }}
            visible={visibleFilters} text  />
        <CollaboratorList
            deleteCollaborators={deleteCollaborators}
            onRowSelect={(inSelection) => setVisibleFilters(!inSelection)}
            companyId={companyId}
            searchTerm={searchTerm} />
        </Card>
      </div>
    </Grid>
 )
}

Upvotes: 1

Related Questions