React Redux passing multiple parameters across multiple levels of components

Question

I had asked this question which threw up more questions regarding the way parameters are passed across components.

Lets say you have three components a bottom or child of a child. A middle or the child. and the top - in my case the container.

I currently have in the bottom component.:

const GlyphiconDirectionChange = (props) => {
const { onSortDirectionChange } = props
return (
  <span onClick={() => onSortDirectionChange('Ascending')} className='glyphicon glyphicon-sort-by-attributes'></span>
)

Note the setting of a single variable "Ascending".

The middle or child component has:

  export const TableHeaders = (props) => {
  const { onSortDirectionChange } = props;
  return (
    <GlyphiconDirectionChange onSortDirectionChange={onSortDirectionChange} />
  )

The top or container component has:

  class ClientsContainer extends Component {

  handleSortDirection = (values = {}) => {
  const { sortDirection, query, sortBy  } = this.props
    const direction = values
    const searchParams = {
      query,
      sortBy,
      direction,
      ...values,
      currentPage: 1,
    }
    console.log('changeSortDirection()!', searchParams)
    this.fetchClients(searchParams)
  }

  return (
    <div className="row">

      <TableHeaders onSortByChange={this.handleSortBy}
        onSortDirectionChange={this.handleSortDirection}
        query={query}
        currentPage={currentPage}
      />

    </div>
  )
 }

My question is , without worry in this instance about the context eg why would you need two or more variables to manage sort direction.. how would you pass more than one parameter from the bottom component and make sure that it is applied to the correct variable in "HandleSortDirection"... How would set a 2nd and or 3rd parameter be set in "GlyphiconDirectionChange" and then how would you retrieve it in "HandleSortDirection" (whats the correct syntax)?

Answer 1

try to pass an object as the first param in your 'bottom component'.

const GlyphiconDirectionChange = (props) => {
  const { onSortDirectionChange } = props
  let options = {
    order: 'Ascending',
    // ... and other props you want
    offset: 10
  }
  return (
    <span
      onClick={() => onSortDirectionChange(options)}
      className='glyphicon glyphicon-sort-by-attributes' />
  )
 }

so in the 'top component', you'll get

handleSortDirection = (options = {}) => {
  const { sortDirection, query, sortBy  } = this.props
  let { order, offset } = options
  ...
}