BasicToggler.jsx

import React from 'react'
import styled from 'styled-components'

export default class BasicToggler extends React.Component {
  state = {
    isToggled: false
  }

  toggle = () => {
    this.setState(state => ({isToggled: !state.isToggled}))
  }

  render() {
    const { isToggled } = this.state 
    return(
      <HomeWrapper>
        <h1> This is my Main Component </h1>
        <div>
          <button onClick={this.toggle}>Click to toggle</button>
          <p>This is toggled {isToggled ? 'ON' : 'OFF'}</p>
        </div>
      </HomeWrapper>
    )
  }
}

const HomeWrapper = styled.div`
  height: 200px;
  width: 400px;
  text-align: center;
  background-color: yellow;
`