How to pass value of button to the function in react - reactjs

Question

I want that on clicking the button X its value X pass to the result function(same with O) where I can store it in a variable. I don't know how to pass this value on calling result and access it there. I tried to find many answers but none worked.
I'm absolutely new to react. Please help!! Thanks!!
This is code snippet
import React, { Component } from 'react';
import './App.css';
import { Link } from 'react-router-dom';
class App extends Component {
render() {
return (
<div>
<h1 align="center">Welcome to TicTacToe</h1>
<br></br><br></br><br></br><br></br>
<div class="front">
Choose your sign !!
<CheckBox type='submit' value='X' id='x' onSubmit={'how to pass value'}/>
<CheckBox type='submit' value='O' id='o' onSubmit={'how to pass value'}/>
</div>
<br></br>
<Link to= "game"><p class="wrap"><button class="button">GO</button></p></Link>
{this.props.children}
</div>
);
}
}
class CheckBox extends Component{
result(i){
//what to access value
}
render(){
return (
<div className={'check-field'}>
<button type={this.props.type} value={this.props.value} name={this.props.name} id={this.props.id}>{this.props.value}</button>
</div>
);
}
}
export default App;

Answer 1

I'm not sure if I understand your problem properly, but to get a value from a child input component (input/button/textarea) in its parent, just pass a prop with a function which will be called in the child on any onClick/onChange callback function. Here's a little example:
class App extends React.Component {
onSubmit(value) {
// I have the button value here!
console.log(value);
}
render() {
return (
<div>
<Button value="X" onSubmit={this.onSubmit} />
<Button value="O" onSubmit={this.onSubmit} />
</div>
)
}
}
class Button extends React.Component {
onClick(event) {
const value = event.target.value;
this.props.onSubmit(value);
}
render() {
return (
<button value={this.props.value} onClick={e => this.onClick(e)}>
{this.props.value}
</button>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />
I hope this solves your problem!

Answer 2

You can store for each checkbox value in state of App. Then, when checkbox is subimtted value it will call handleSubmit and event parameter e holds value and id of checkbox. In your case you can examine if it's X or Y and setState accordingly. This will re-render checkboxes who will via props get proper values.
import React, { Component } from 'react';
import './App.css';
import { Link } from 'react-router-dom';
class App extends Component {
state = {
X : false,
Y : false
}
handleSubmit = (e) => {
if(e.target.id === 'x') {
this.setState({X:true});
} else {
this.setState({Y:true});
}
}
render() {
const { X,Y } = this.state;
return (
<div>
<h1 align="center">Welcome to TicTacToe</h1>
<br></br><br></br><br></br><br></br>
<div class="front">
Choose your sign !!
<CheckBox type='submit' value={X} id='x' onSubmit={this.handleSubmit}/>
<CheckBox type='submit' value={Y} id='o' onSubmit={this.handleSubmit}/>
</div>
<br></br>
<Link to= "game"><p class="wrap"><button class="button">GO</button></p></Link>
{this.props.children}
</div>
);
}
}
class CheckBox extends Component{
render(){
const {value, type, name, id} = this.props;
return (
<div className={'check-field'}>
<button type={type} value={value} name={name} id={id}>{value}</button>
</div>
);
}
}
export default App;