React Redux passing parameters via functions from child components to parent

Question

I asked a question on this and I believe Dennis who answered the question gave the answer I thought was correct. I cant figure out how to pass variables back to the parent function correctly...

Here is the code I want to fix.

Child of a Child Component

First there is a child of a child component. This will set the sort direction of the list if you click on it. Its using "onSortDirectionChange" function and should set the sort direction by setting a variable "sortDirection".

const GlyphiconDirectionChange = (props) => {
  const { onSortDirectionChange } = props

  return (
    <span>
      {onSortDirectionChange === 'Ascending' ?
          <span onClick={() => onSortDirectionChange('Ascending')} className='glyphicon glyphicon-sort-by-attributes'></span>
        :
          <span onClick={() => onSortDirectionChange('Descending')} className='glyphicon glyphicon-sort-by-attributes-alt'></span>
      }
    </span>
  )
}

Click on the glyphicon next to the header name and it should change the direction of the list. Simple component.

Child component

Its parent, but the child of "ClientContainer" is TableHeaders. "GlyphiconDirectionChange" sits in this component to display the up or down glyphicon that you can click...

     <GlyphiconDirectionChange onSortDirectionChange={onSortDirectionChange} />

Parent Component

ClientContainer is the top component (actions etc will be split off later - they are in there now for simplicity). In here TableHeaders is displayed as follows:

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

Note the second line is the function from the bottom component.

It is referring to "HandleSortDirection".

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

Problem How do you set variables in the "child of a child component" and move them through to the "HandleSortDirection" function.

I am getting the error

Uncaught TypeError: Cannot create property 'query' on string 'Descending'

I need the "searchParams" variable "sortDirection" to be set to either "Ascending" or "Descending" and be used correctly in my function..

How do I pass my sortDirection variable correctly to the function in the parent.

Answer 1

"How do you set variables in the "child of a child component" and move them through to the "HandleSortDirection" function."

You are already doing this but you have a typo.

values.query = values.query || ''

This line is erroring because values is equal to 'Descending' . You are passing in a string here from your child of child component, and it is being passed up the chain of callbacks til it gets here.

Remove that line and replace it with const direction = values; and then pass direction in place of sortDirection, in searchParams.