Multiplier.js

import React, { Component } from 'react'
import './a1.css'

import PairParent from './bonus/PairParent'

class Assignment1 extends Component {
  render() {
    return (
      <div>
        <section className="firstComponent">
          <h2>Assignment 1</h2>
          <Multiplier />
        </section>

        <section className="secondComponent">
          <h3>Bonus</h3>
          <PairParent />
        </section>
      </div>
    );
  }
}

const MultipliedChild = (props) => <h3>{props.num * props.multiplier}</h3>

class Multiplier extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      value: 1,
      multiplier: 1
    }
  }

  multiply = () => {
    // so I know it seems like extra work to have 2 state values, but it's the correct way to model the problem.
    // What's the problem? The problem may is in fact that you want the input form to change its value,
    // but the multiplication not to happen to explicitly when you say, i.e. when you click the button.
    // If instead, you wanted the multiplication to happen on keypress, you could just use `this.state.value` 
    // for both. So even though that seems like a more advanced user experience, it in fact is easier to do!
    // When initially learning React, that's a key often overlooked takeway/gotcha.
    this.setState({ multiplier: this.state.value })
  }

  render() {
    return (
      <div>
        <MultipliedChild num={100} multiplier={this.state.multiplier} />

        <form onSubmit={this.multiply}>
          <input
            type="number"
            value={this.state.value}
            onChange={(event) => {
              this.setState({ state: event.target.value })
            }}
          />
          <input type="submit" value="Give me a multiplier" />
        </form>
      </div>
    )
  }
}

export default Assignment1;