CODEWITHSUNDEEP
reactjs
Shaggy
Shaggy

Reputation: 69

How to pass value of button to the function in react

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;

Upvotes: 1

Views: 7208

Answers (2)

Mirko Acimovic
Mirko Acimovic

Reputation: 506

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;

Upvotes: 0

sarneeh
sarneeh

Reputation: 1388

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!

Upvotes: 4

Related Questions