React - How do I assign a variable to the input value in another Component's class?

Question

I am currently creating a damage calculator app with React. I am just starting out so bear with me.

Here is my code for getting the input value of 'Atk'. This is currently in my component called 'CalculatorItems':

class Atk extends Component {
constructor(props) {
    super(props);

    this.state = {stats: ''}

}

render() {
    return (
        <div>
            <label>PHY/MAG ATK</label><br/>
            <input  value={this.state.stats}
                    onChange={event => this.setState({stats: event.target.value})}
                    type="number"
            />
            <br/><br/>
        </div>
    )
}

}

Now I created a function to be called whenever the 'Calculate Damage' button is clicked. In this function, I need to assign variable 'A' to the input value of the above 'Atk'. This is in the parent component called 'Calculator'.

const damageCalc = () => {
        let A = (Class Atk's input value).

My question is what am I supposed to write in the parenthesis so that I can assign the variable A to Atk's input value/state? Would work?

Keep in mind this is in another component since I need to apply the function to CalculatorButton's onClick (CalculatorButton is another child component).

Lift your `stats` state to the parent, let the child update this value via a handler function. — devserkan, Sep 19 '18 at 23:30

score 0 · Answer 1 · answered Sep 19 '18 at 23:33

Common practice in such case is to pass callback function from parent to child. On child element click you fire that method (from child) and pass some value as a parameter (to parent) Than you have callback implementation in parent and can do whatever you want with the value.

Nowadays people use state managers like Redux or Mobx to handle (sic!) state managing for components/application. But as you said you are just starting, probably still some way before you, until you implement state managers into your projects :)

Check this link:

Child to parent communication in React (JSX) without flux

score 0 · Answer 2 · answered Sep 19 '18 at 23:33

You either need to pass the state in Atk to another component as props or the state needs to be lifted to a higher component which can pass it to whichever component is using the damageCalc function. If you choose the latter, you'll be passing the onChange handler down to Atk.

score 0 · Answer 3 · answered Sep 19 '18 at 23:35

The most common approach is to add a callback prop to your child component so that it can notify the parent component that its data has changed. Then the parent component can update its state with the child's state.

For example, in your Atk component:

class Atk extends Component {
  constructor() {
    this.state = { stats: '' }
  }

  render() {
    return (
      <div>
        <label>PHY/MAG ATK</label><br/>
        <input  value={this.state.stats}
                onChange={event => {
                  const stats = event.target.value;
                  this.setState({ stats });
                  this.props.onValueChange(parseInt(stats, 10));
                }}
                type="number"
        />
        <br/><br/>
      </div>
    )
  }
}

...and in the parent:

class DamageCalculator extends Component {
  constructor() {
    super();
    this.state = { atk: null };
  }

  calculateDmg() {
    return this.state.atk * foo; // or whatever the calculation is
  }

  render() {
    return (
      <div>
        <Atk onValueChange={ atk => this.setState({ atk }) }/>
      </div>
    );
  }
}

Thank you , that makes sense. I re-edited my code, however now the calculateDmg() is running whenever I start the page. I want it to run ONLY when the calculate damage button is clicked. How would I accomplish this? — Robin Sung, Sep 20 '18 at 00:20
I'd suggest asking in a separate question since it's not related to the first problem. Good luck! — Jacob, Sep 20 '18 at 00:24

score 0 · Answer 4 · answered Sep 19 '18 at 23:50

Getting data back from your child component is not a common case in React. Generally, we keep the state in the parent, then let the child update it. So, send the state property and a handler function to your child component, then do the update via this handler. So, your child component can be a stateless, dumb component. With this method, you can share this state with many child components.

class App extends React.Component {
  state = {
    stats: "",
  };

  handleCange = e => this.setState( { stats: e.target.value } );
  damageCalc = () => console.log( this.state.stats );

  render() {
    return (
      <div>
        <Atk onChange={this.handleCange} stats={this.state.stats} />
        <CalculatorButton onClick={this.damageCalc} />
      </div>
    );
  }
}

const Atk = ( props ) => {
  const { stats, onChange } = props;
  return (
    <div>
      <label>PHY/MAG ATK</label><br />
      <input
        value={stats}
        onChange={onChange}
        type="number"
      />
      <br /><br />
    </div>
  );
};

const CalculatorButton = props => (
  <button onClick={props.onClick}>Click</button>
);

ReactDOM.render( <App />, document.getElementById( "root" ) );

<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="root"></div>

React - How do I assign a variable to the input value in another Component's class?

4 Answers4