How to update a property of a component which has been passed itself as a property

Question

Ok, I have a generic filters component which receives an index-filters component (set with properties in the index page) as a property. It will render it.

In the generic filters component, I have a method handleSingleFilter, which I need to pass to the index-filters component, but of course as the index-filters properties were set in the index page, it is not allowing me to update them.

In the index:

   <IndexFilters
      onSingleFilterChange={() => {
         return
      }}
   />

In the filters:

const { filters } = this.props
public handleSingleFilterChange = (filteredInfo: FilteredInfo) => {
    this.state = {
        filteredInfo
    }
}
public render() {
    filters.props.onSingleFilterChange = this.handleSingleFilterChange
    return (
        <div className={'filter-dropdown'}>
           {filters}
        </div>
    )
}

I get the following error: filters.tsx:36 Uncaught TypeError: Cannot assign to read only property 'onSingleFilterChange' of object '#'

Is there a way to make the property writable?

Does this answer your question? [How to pass props to {this.props.children}](https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children) — Tripurari Shankar, Jan 07 '20 at 13:34

Tripurari Shankar · Answer 1 · 2020-01-26T05:05:28.503

To answer your question which is

How to update a property of a component which has been passed itself as a property

check How to pass props to {this.props.children}

You can use React.cloneElement() here see https://reactjs.org/docs/react-api.html#cloneelement

something like this

const newFilters = React.cloneElement(
  this.props.filters,
  {onSingleFilterChange: this.handleSingleFilterChange},
);
return (
  <div className={'filter-dropdown'}>
    {newFilters}
  </div>
)

score 0 · Answer 2 · answered Jan 07 '20 at 13:24

0

Ok, I ended up changing my logic so I could move the handleSingleFilterChange to the index, then no need to do anything hacky.

answered Jan 07 '20 at 13:24

Gioia Fueter

605
1
5
16

Dmitry Reutov · Answer 3 · 2020-01-07T13:06:30.960

-1

if filters is not rendered yet then you can do like this

<div className={'filter-dropdown'}>
  <filters onSingleFilterChange = {this.handleSingleFilterChange}>
</div>

otherwise no need to rewrite props, you can write value directly to any attribute of an object

filters.onSingleFilterChange = this.handleSingleFilterChange

edited Jan 07 '20 at 13:06

answered Jan 07 '20 at 12:48

Dmitry Reutov

2,995
1
5
20

because filter is being passed as a props and props are read only so this is not the recommended way also fliter is a React element ( means it's already converted from JSX so you can't use it like JSX) – Tripurari Shankar Jan 07 '20 at 13:11
1

see this https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children – Tripurari Shankar Jan 07 '20 at 13:14
did you checked the link I gave you ? https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children – Tripurari Shankar Jan 07 '20 at 13:27
and read the question carefully again **itself as a property** – Tripurari Shankar Jan 07 '20 at 13:29
So component1 renders component2, passes itself as a property to it and component2 renders component1? It leads to recursion, no? Anyway it all looks weird – Dmitry Reutov Jan 07 '20 at 13:44

How to update a property of a component which has been passed itself as a property

3 Answers3