TypeError: this.props.setProductBrand is not a function

Viewed 35

When i click the update button the error occures. I am passing setProductBrand func. to productBrand Component.

ProductBrand.Js

<td>
    <Button onClick={() => this.props.setProductBrand(brand.productBrandId)} color="info">Güncelle</Button>
</td>

App.js

setProductBrand = (brand) => this.setState({ selectedBrand: brand });

<Route exact path='/ürünMarkası' setProductBrand={this.setProductBrand} component={ProductBrand} />
1 Answers

You are only passing setProductBrand prop to the Route component. Route components won't pass extra props on to rendered components. Use the render prop for this.

<Route
  exact
  path='/ürünMarkası'
  render={routeProps => (
    <ProductBrand setProductBrand={this.setProductBrand} {...routeProps} />
  )}
/>

If ProductBrand doesn't care about the route props then it can be simply rendered as a child of the `Route.

<Route
  exact
  path='/ürünMarkası'
>
  <ProductBrand setProductBrand={this.setProductBrand} />
</Route>
Related