ReactJS and Boolean Values

While learning React I came upon the finding that for some reason it doesn't do booleans the way I'm used to and I cannot seem to understand it.

I've tried a couple of methods to fix it but without success and I'm basically about to give up on React. jQuery is much much easier to me.

I understand that React saves the false value as string to state and then interprets it as truthy. But I haven't managed to find a way to either save it as boolean or convert it to boolean.

Has React even heard of Boolean?!?!

Have a look at the fiddle and please tell me what I'm missing...or at least point me in the right direction. Been loosing my mind on this for a whole day.

https://jsfiddle.net/nicholas_cb/btye84j2/8/

function Options(props) {

    /* TRIED TO FIX IT THIS WAY SO AS TO SET CHECKD VALUES TO BOOLEAN INSTEAD OF STRING AND CHANGING THE CHECKED VALUE TO LOCAL VARIABLES -- OBVIOUSLY DIDN'T WORK... x_X

    let optionValue1 = (props.optionValue1 == true);
    let optionValue2 = (props.optionValue2 == true);

    */

    console.log("Options received: optionValue1 = " + props.optionValue1 + " optionValue2 = " + props.optionValue2);
        let result = "Options received: optionValue1 = " + props.optionValue1 + " optionValue2 = " + props.optionValue2;

    return (
    <div>
    <br/>
    <label>{result}</label>
    <br/><br/>
    <label>Option One</label><input name="optionValue1" type="checkbox" checked={props.optionValue1} onChange={props.handleChange}/>
        <label>Option Two</label><input name="optionValue2" type="checkbox" checked={props.optionValue2} onChange={props.handleChange}/>
      </div>
    )

}

class Form extends React.Component {
   constructor(props){
       super(props)
   }

    render() {
    if(this.props.optionValue1 == true && this.props.optionValue2 == true) {
    console.log("TRUE/TRUE");
    return (
     <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
    }

        if(this.props.optionValue1 == false && this.props.optionValue2 == true) {
    console.log("FALSE/TRUE");
    return (
     <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
    }

        if(this.props.optionValue1 == true && this.props.optionValue2 == true) {
    console.log("FALSE/FALSE");
    return (
     <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
    }

        if(this.props.optionValue1 == true && this.props.optionValue2 == true) {
    console.log("TRUE/FALSE");
    return (
     <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
    }

    console.log("Matched no case.");
    return (
      <Options 
       optionValue1 = {this.props.optionValue1}
       optionValue2 = {this.props.optionValue2}
       handleChange = {this.props.handleChange}
     />
    )
  }


}

class FormContainer extends React.Component {

constructor(props) {
  super(props)

  this.state = {
    optionValue1: true,
    optionValue2: true,
  }

  this.handleChange = this.handleChange.bind(this)

}

    handleChange(event) {

        if(event.target.type == 'checkbox'){
            console.log("Checkbox changing: " + event.target.name);
            console.log("New value: " + event.target.checked);

                event.target.value = event.target.checked;

        }

        const {name, value} = event.target

        this.setState({
            [name]: value
        })
    }

  render() {
    return (
        <Form
        handleChange={this.handleChange}
        optionValue1={this.state.optionValue1}
        optionValue2={this.state.optionValue2}
      />
    )
  }
}

ReactDOM.render(
  <FormContainer />,
  document.getElementById('container')
);

I've output all cases to console such as TRUE/TRUE, FALSE/TRUE etc. It's also surprising to me that for some reason it comes across the matched none case? What's up with that? Where's that coming from? If it interprets it as truthy/falsy shouldn't it always match one of the cases?

Thanks