Fetching String from an input text field in Flux design pattern in JSX/React

I am making a website that fetches data from an API and shows the data in a view which is implemented in flux pattern with JSX and React. The data I'm receiving is weather report data in Denmark, and I want users simply type the city they want in an input text field, fetch the information only regarding that city and the view will get updated accordingly. However, In my implementation, I do not render it where I define JSX code, I render the state of view outside of where I declare JSX code(it's not inside a render() block). It is in my index.js document.

JSX part looks like this:

const PersonDataBody = ({model, dispatcher}) => (
    <tbody> 
        {
            model.showData().map(report => <PersonRow key={report.quantity.toString()} {...{report, dispatcher}}/>) 
        }
    </tbody>
)

This is simply where I start creating tables with the data I fetched, the rest isn't very important. What's important is my exported JSX code to index.js:

export default dispatcher => model => (
   
    <div id='base'>
        <h1>Weather Report</h1>
        <input type="text" id ="inputsection2"></input>
      
        <div id='interval'>
        <input type="text" id ="inputsection3" class="input1"></input><button onClick = {() => dispatcher()({type:'Copenhagen'})}>Set Interval</button>
        </div>
        <table class="styled-table" id='reports'>
            <thead><tr class="active-row"><td>Value</td><td>Type</td><td>Unit</td><td>Time</td><td>Place</td></tr></thead>
          
            <PersonDataBody {...{model, dispatcher}}/> 
        </table>
    </div>
)

I want to be able to fetch the data in the input text field which has the id of "inputsection3" and I want to pass that string as an argument where I call the dispatcher: <button onClick = {() => dispatcher()({type:'Copenhagen'})}>. I'd like to pass the "type" argument to dispatcher from what exists in input text field basically. Information will be updated, the view will be rendered again.

index.js where the view is rendered, I am sharing only the part which is related to my question:

 let renderer = dom => ReactDOM.render(dom, document.getElementById('root'))
        let theDispatcher
        const theView = view(() => theDispatcher) 
 
        const theStore = store(theModel, theView, renderer) 

        theDispatcher = dispatcher(theStore) 

        renderer(theView(theModel))

Thanks in advance. There are similar questions asked in different threads, their render methods and JSX code are not decoupled.

Solution

OK, so to get the information out of your input tag you can simply get the element by ID and get it's value like so:

export default dispatcher => model => (
   
    <div id='base'>
        <h1>Weather Report</h1>
        <input type="text" id ="inputsection2"></input>
      
        <div id='interval'>
        <input type="text" id ="inputsection3" class="input1"></input><button onClick = {() => dispatcher()({ type: document.getElementById('inputsection3').value })}>Set Interval</button>
        </div>
        <table class="styled-table" id='reports'>
            <thead><tr class="active-row"><td>Value</td><td>Type</td><td>Unit</td><td>Time</td><td>Place</td></tr></thead>
          
            <PersonDataBody {...{model, dispatcher}}/> 
        </table>
    </div>
)

This will do what you need