Return a value from a modal with multiple buttons (React)

Question

Imagine I have the following UI:

I click the input field and a modal opens where I can select between multiple options (essentially a fancily styled dropdown).

With normal Javascript I'd do something like:

<button id="show">Show</button>
<div id="popup">
    Please choose
    <button id="option1">1</button>
    <button id="option2">2</button>
    <button id="option3">3</button>
    <button id="option4">Little</button>
    <button id="option5">A lot</button>
    <button id="option6">A few</button>
</div>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('#popup').hide();
$('#show').click(function() {
    openPopup()
        .then(function(data) {
            $('#result').html("You pressed " + data)
            closePopup();
        })
})
function openPopup() {
    return new Promise(function(resolve, reject) {
        $('#popup').show();
        $('#option1').click(function() { resolve('"1"') })
        $('#option2').click(function() { resolve('"2"') })
        $('#option3').click(function() { resolve('"3"') })
        $('#option4').click(function() { resolve('"Little"') })
        $('#option5').click(function() { resolve('"A lot"') })
        $('#option6').click(function() { resolve('"A few"') })
    });
}
function closePopup() {
    $('#popup').hide();
}
</script>

Current React code:

My react code so far is (with boring parts stripped away):

function Modal(){
    return (
        <div>
            <div>
                <UnitBlock name="1" />
                <UnitBlock name="2" />
                <UnitBlock name="3" />
                <UnitBlock name="4" />
                <UnitBlock name="5" />
            </div>
            <div>
                <UnitBlock name="Little" />
                <UnitBlock name="A lot" />
                <UnitBlock name="A few" />
            </div>
        </div>
        )
}

function UnitBlock(props) {
  return <div className="UnitBlock">{props.name}</div>
}

function FakeInputField(props){
    return <div className="FakeInputField">{props.name}</div>   
}

function example(){
    return(
        <div>
            <FakeInputField name="Amount"/>
            <Modal/>
        </div>
    )
}

So my basic question is: How could I return a value to the (fake) input field by clicking on one of the buttons in the modal?

Like in the example with the promises I tried to create something simple, like "Interacting with the input field opens the modal, and then the button you click sends its information to the input field".

Answer 1

I ended up using:

class Parent extends React.Component{
    useDataFromChild = (value) => {
        console.log(value)
    }

    render() {
         return (
                <div>
                    <Child name="Option: Little" onReceiveData={this.useDataFromChild}/>
                    <Child name="Option: Many" onReceiveData={this.useDataFromChild}/>
                </div>
        )
     }
}

class Child extends React.Component {
    sendData = () => {
        this.props.onReceiveData(this.props);            
    }

    render() {
        return (
            <div >
                <div onClick={this.sendData}>{this.props.name}</div>
            </div>            
        );
    }
}

ReactDOM.render(<Parent/>, document.getElementById('root'));

But apparently React Redux is the way to go with these problems.

Answer 2

I think that this is a similar to: React js onClick can't pass value to method

However the easiest solution is:

class Modal extends React.Component { 
  resolve = (val) => { console.log(val); } 

  render() { 
    return ( 
      <div> 
        <div> 
          <UnitBlock name="1" onClick={() => this.resolve(1)}/> 
          <UnitBlock name="2" onClick={() => this.resolve(2)}/> 
        </div> 
      </div>)  
  } 

} 

function UnitBlock(props) { 
  return <div className="UnitBlock">{props.name}</div> 
}

---

Better Solution

https://codesandbox.io/s/p9lk4ooxxq

class UnitBlock extends React.Component { 
  resolve = (val) => { console.log(val); } 

  render() { 
    return <div className="UnitBlock" onClick={
      () => this.resolve(this.props.name)}>{this.props.name}</div>
  }
}

function UnitBlock(props) { 
    return ( 
      <div> 
        <div> 
          <UnitBlock name="1"}/> 
          <UnitBlock name="2"}/> 
        </div> 
      </div>)  
  } 

}