Simple toggle app using react with its states.

React Simple Toggle

import React from 'react';

const container = { width: '1000px', margin: '20px auto'}

class App extends React.Component {

  constructor(props) {
    super(props);
    this.toggleVisibility = this.toggleVisibility.bind(this);
    this.state = {
      visiable: false
    }
  }

  toggleVisibility() {
    this.setState((prevState) => {
      return {
        visiable: !prevState.visiable
      }
    })
  }

  render() {
    return (
      <div style={container}>

          <button onClick={this.toggleVisibility}>
            { this.state.visiable ? 'Hide Details' : 'Show Details' }
          </button>

          <p>
            {
              this.state.visiable ? ' Here are some details about this post. ' : ''
            }
          </p>

      </div>
    )
  }
}

export default App;