Is the SAP application logic properly thought out?

Question

JavaScript

There is SAP, it is necessary that there is a form for filling in data, and a result component on the same page, dynamically updated depending on the entered data.
Form : There are dynamic questions that come with the database. For each answered question, a request is sent back to the database, where the data for the result component comes.
I just got to redux and don't know all the possibilities yet, so please point me in the right direction.
I do it like this. Each question block in the form has its own template

const items = requirements.map((item)=> <RadioButtons  handlerFormClick={this.handlerFormClick} dispatchRequires={this.dispatchRequires} key={item.cli_id} id={item.cli_id} name={item.cli_name} desc={item.desc}/>)

Inside there is a label with a question and 2 radio buttons, yes or no.
On click : the button's own setState is called, and the parent function is executed by the callback

onRadioBtnClick(rSelected) {
            this.setState({ rSelected },this.props.handlerFormClick());
           
          }

Next, I just want to collect all buttons with the active (pressed) class, check inner.text = 'Yes'
, form an array with id and send it to the server, where to get the result.
But

handlerFormClick(){
   console.log( this.formRef.current[0].className)
}

The class changes only after the click handler, and then I thought. Maybe I'm not doing it right at all?
How then is it correct, are there any rules? Maybe it’s better to dispatch in general, through the general state, which I will change by clicking on the button, and after the callback make a request to the database?

Answer 1

Correctly work with the state, and not calculate it from data from the DOM.
Storing form state in a Redux store doesn't make much sense.