How to make/access state using props in react?

Question

I made an app with multiple components and want their state to be accessed using parent/main app, I'm not sure how to get it. what i'm trying to do is when i change state in main "App" the component state should change. One of the component is 'checkbox' and now i want to access its state using parent app, I made multiple attempts but not getting it done. my code goes like this..

This is Main 'App' code:

import React, { Component } from 'react';
import Checkbox from './checkbox';
import Radio from './Radio';
import ToggleSwitch from './ToggleSwitch';
import PrimaryButton from './PrimaryButton';

class App extends Component {
  onClick(isClicked){
    isChecked:true
  };

  render() {
    return (
      <div id="form">
        <Checkbox
          onClick={this.onClick}
        />
        <RadioButton
          onClick={this.onClick}
        />
      </div>

    );
  }
}

export default App;

The component i want to access goes like this:

import React, { Component } from 'react';
class Checkbox extends Component {

  constructor(props){
    super(props);
    this.state={
      isChecked:true
    };
  };

  onCheck(){
    this.setState({
      isChecked: !this.state.isChecked
    });

    this.props.isClicked()
  };

  render() {
    return (
      <div>
        <div
          className={this.state.isChecked ? 'checked':  'unchecked'}
          onClick={this.onCheck.bind(this)}
        >
        </div>
      </div>
    );
  }
}

export default Checkbox;

Answer 1

You forgot to bind the onClick event in the app component, try this it will work :

class App extends Component {       
   onClick(isClicked){
      console.log('isClicked', isClicked);
   };

   render() {
      return (
        <div id="form">
           <Checkbox onClick={this.onClick.bind(this)}/>
        </div>
      );
   }
}

Answer 2

If you already have onClick handler for the Checkbox I don't see why you couldn't just move the state up to the App component and just pass down a callback from there to the Checkbox that will update the parent state. That seems like a more React way to do it, to me.

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      isChecked:true
    }
  }
  onClick = (isClicked) => {
    this.setState({isChecked: !this.state.isChecked})
  }

  render() {
    return (
      <div id="form">
        <Checkbox
          onClick={this.onClick}
          ischecked={this.state.isChecked}
        />
      </div>

    );
  }
}

Component

class Checkbox extends Component {

  onCheck(){
    this.props.onClick()
  }

  render() {
    return (
      <div>
        <div
          className={this.props.isChecked ? 'checked':  'unchecked'}
          onClick={this.onCheck.bind(this)}
        >
        </div>
      </div>
    )
  }
}