remove component on button click in reactjs

Question

I have this structure in app, each level is a component:

Assigning
├── Assignee (key='user0')
│   ├── AssigneeTask (key='user0task0')
|   |   └── button (onClick)
│   ├── AssigneeTask (key='user0task1')
|   |   └── button (onClick)
|   └── AssigneeTask (key='user0task2')
|       └── button (onClick)
├── Assignee (key='user1')
└── Assignee (key='user2')

I want to remove Assignee component when i click on button in it using the key of component, how can i do this in reactjs? I tried to pass the key to the onClick and set the display to none, but i can't get the component by its key!

This depends a bit on your implementation. Can you show the code for Assigning? — Chris
– Chris, Commented Jul 23, 2018 at 11:59
Use refs. That would solve your problem. Also, you don't really need to access key here. Keys are only used by react internally to identify each node individually. We as a react dev don't really use key per se. — UtkarshPramodGupta
– UtkarshPramodGupta, Commented Jul 23, 2018 at 12:00
@UtkarshPramodGupta there is a reason react gives a warning if you are missing access keys — Marvin Fischer
– Marvin Fischer, Commented Jul 23, 2018 at 12:17

Marvin Fischer · Accepted Answer · 2018-07-23 12:15:17Z

2

You can use state / function uplifting:

class Container extends Component {
    [...]
    render() {
        return this.state.opened && <ContainerButton clickedButton={this.close} />
    }

    close = () => {
        this.setState({opened: false});
    }
}

class ContainerButton extends Component {
    [...]

    render() {
        <button onClick={this.props.clickedButton} />
    }
}

If you now trigger the onClick on the button, the close function of Container gets triggered

answered Jul 23, 2018 at 12:15

Marvin Fischer

2,5823 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

remove component on button click in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related