react.JS – hide/show component

@jag1Jan 16.2018

Hello

I am new to reactJS.

I wonder if it is possible to hide/show components “onclick”? For example: index.php shows some text in headings and paragraphs(a component), a button or link can be found under the text. if the link or button is clicked, the text will change(new headings and paragraphes, aka a new component). How can this be done?

to post a comment

JavaScript

@Jeff_MottJan 25.2018 — #Short answer, in your onclick handler, call setState. The headings and paragraphs you show could come from the state, so when you change the state, then your DOM automatically re-renders.

Here's an example from the [url=https://reactjs.org/tutorial/tutorial.html][U]React tutorial[/U][/url]:

<i>
 </i>class Square extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 value: null,
 };
 }
 
 render() {
 return (
 &lt;button className="square" onClick={() =&gt; this.setState({value: 'X'})}&gt;
 {this.state.value}
 &lt;/button&gt;
 );
 }
 }

@stianokern1337Mar 08.2019 — #A basic way to toggle onClick to show or hide.

Just replace the 'SHOW' and 'HIDE' width the divs you want to show or hide.

Hope it helps! And contact if you need some more help ?

import React, { Component } from 'react'

export default class Test extends Component {

constructor(props) {

super(props);

this.state = {

value: false

}

this.onClickHandler = this.onClickHandler.bind(this);

}

onClickHandler = () => {
   this.setState (state => ({
   value: !state.value
   }))
  }

render() {

return (

<div>

<button onClick={this.onClickHandler}>

{this.state.value ? 'SHOW' : 'HIDE'}

</button>

</div>

)

}

}

@rootMar 08.2019 — #{"locked":true}

@rootMar 08.2019 — #PLEASE DO NOT RESURRECT OLD POSTS,

*locked*

react.JS – hide/show component

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

react.JS – hide/show component

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴