Update on props change

Hi,

I can’t figure out what I am doing wrong. Can I show/hide UI element depending on object? here is some sample of code:

// ability.js
import { AbilityBuilder } from '@casl/ability'

function subjectName(item) {
  if (!item || typeof item === 'string') {
    return item
  }
  console.log('Type is:  ', item.__type);
  return item.__type
}

export default AbilityBuilder.define({ subjectName }, can => {
  can(['update', 'delete'], 'Account', { creator: 'John', role: 'Manager'})

})

then in my component I do:

import React, {Component} from 'react';
import Can from "./Can";

class MyComponent extends Component {
    state = {
        user: '',
        Perm: {
            creator: 'Jeff',
            role: 'Worker',
            __type: 'Account',
        }
    }

    clicked = () => {
        this.setState({Perm: {
            creator: 'John',
            role: 'Manager',
            __type: 'Account',
            }
        })
    }

    render () {
        console.log(this.state.Perm);
        return (
            <div>
                <h1>Permission</h1>
                <div>{this.state.Perm.creator}</div>

                <Can do='update' on={this.state.Perm}>
                   <button>Modify</button>
                </Can>


            <button onClick={this.clicked}>Change</button>
            </div>
        )
    }
}

export default MyComponent;

Jeff user indeed does get switched for John, so the component should be shown. I probably failed to understand something. The main reason why I am asking, is the fact that I will be getting roles from Redux, therefore I want to update my Navigation once user has logged in - depending on what role comes back from REST API

Appreciate any help!

[chickenandsnake]

Дуже дякую!

Works as expected!!!

[stalniy]

Fixed in @casl/react@0.4.0. Thanks for using CASL!