How to catch cheсked in react?

Question

React

I'm trying to make a filter with checkboxes, if you select a checkmark or uncheck it, and only after pressing the apply button, certain items would be shown.
I can’t understand what’s wrong, the checked is not caught, and the state does not change accordingly) I will be glad

class MainComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        show_title1: true,
        show_title2: false
      }
    }
    checkedChange() {
      this.props.applyChange(
        this.refs.show_title1.checked,
        this.refs.show_title2.checked
        )
    }
    applyChange(show_title1, show_title2) {
      this.setState({
        show_title1: show_title1,
        show_title2: show_title2
      })
    }
    render() {
      return 
        <div>
          <FilterItems 
            handleChange={this.checkedChange.bind(this)}
            show_title1={this.state.show_title1}
            show_title2={this.state.show_title2}>
          </FilterItems>
          <button onClick={this.applyChange}>Применить</button>
          <Items 
            show_title1={this.state.show_title1}
            show_title2={this.state.show_title2}>
          </Items>
        </div>
    }
  }
  class FilterItems extends React.Component {
    render() {
      return (
        <div>
        <input onChange={this.props.handleChange} 
        type="checkbox" 
        ref="show_title1" 
        checked={this.props.show_title1}/>Столбец 1

        <input onChange={this.props.handleChange} 
        type="checkbox" 
        ref="show_title2" 
        checked={this.props.show_title2}/>Столбец 2
        </div>
        )
    }
  }
  class Items extends React.Component {
    render() {
      return 
      <div>
      {this.props.show_title1? <div>Первый столбец</div>: null>}
      {this.props.show_title2? <div>Первый столбец</div>: null>}
      </div>
    }
  }

Answer 1

UPD1:
You can only use ref in the parent component: in your case FilterItems.

checkedChange(name, val) {
  this.setState({ [name]: val });
}

class FilterItems extends React.Component {
    render() {
      return (
        <div>
          <input onChange={(e) => this.props.handleChange('show_title1', e.target.checked)} 
            type="checkbox" 
            checked={this.props.show_title1}/>Столбец 1

          <input onChange={(e) => this.props.handleChange('show_title2', e.target.checked)} 
            type="checkbox" 
            ref="show_title2" 
            checked={this.props.show_title2}/>Столбец 2
        </div>
     );
    }

Working example - jsfiddle.net/yuvuyrhv/25

Answer 2

ref="show_title1" instead of ref={show_title1}