How to make display: none at onClick in React in simplest way possible

How could someone write a code in React able to reproduce in the simplest form the code below :

<p onclick="this.style.display = 'none'">Hello, it seems React has useless bloatware concepts in it</p>

Trying at first to do things as

<p onClick = {() => disappear(this)}>

then also

<p onClick={disappear(this)}>Hello, ...</p>

<p onClick={function() {disappear(this)}}>Hello, ...</p>

together with

function disappear(elem) {elem.style.display = 'none'}

even the simplest one

<p onClick={this.style.display = 'none'} >

resulted in error messages as "Cannot set properties of undefined (setting 'display')", even when I later avoided to use the 'this' inside of arrow functions (just to avoid the 'this' being evaluated to global window object). Anyway, even achieving window instead of undefined would have been a better option to start to debug the code from there.

Is there in React any simple form / as in vanilla JS / to achieve such simple functionality? If not, I wouldn't want to apply states or any more complex stuff just to do that, and I even wonder why React creators went so far away from the KISS principle in programming (by adding useless complexity for simpler topics, at least as this one here).

CodePudding user response：

if you want only display none you can use this one,

<p onClick={(e) => e.target.style.display = "none" }>Hello, it seems React has useless bloatware concepts in it</p>

CodePudding user response：

Well, if you want most simple solution, when you could try this

<p onClick={(e) => {e.target.style.display = 'none'}} >...</p>

this keyword in case of class components and arrow function will refer to React component itself, not DOM element. That is why code from HTML will not work here.