Updating style based on button click in React

Document.es6

import React, {Component, PropTypes} from 'react'
import View from './View'
import Button from '../common/Button'

export default class Document extends Component {
  static propTypes = {
    program: PropTypes.object.isRequired,
  }

  constructor() {
    super()
    this.state = {
      hideCosts: false,
    }
  }

  onButtonClick = (e) => {
    e.preventDefault()
    this.setState({ hideCosts: true })
  }

  render() {
    const {program} = this.props

    return (
      <div className="Document">
        <HiddenStyle hide={this.state.hideCosts} />
        <button
          className="btn btn-primary preview-action"
          onClick={this.onButtonClick}
        >
          <i className="fa fa-eye-slash" aria-hidden="true"></i>
          Hide Costs
        </button>
        <View program={program} />
      </div>
    )
  }

}

const HiddenStyle = ({ hide }) => {
  if (hide) {
    return (
      <style type="text/css">
        { `.hideable-item { display: none; }` }
      </style>
    )
  } else {
    return <noscript />
  }
}