CODEWITHSUNDEEP
javascriptreactjsmaterial-uitextfieldswap
sonan
sonan

Reputation: 111

Swap values of two TextFields in Reactjs (material-ui)

I have a functional component that contains user input and it is child of a class component which contains the state with the input. In the child functional component I want a function that can swap values between two TextFields(https://material-ui.com/api/text-field/).

What I have tried so far:

<TextField
     id="outlined-from"
     label="Από"
     className={classes.textField3}
     value={transport_detail[idx].from}
     onChange={handleDynamicChange('from', idx)}
     ref={x => from = x}
/>
<IconButton onClick={()=>{
     var temp = from.value;
     console.log(temp)
     from.value = to.value;
     to.value = temp;
 }}>
     <SyncIcon/>
</IconButton>
<TextField
     id="outlined-to"
     label="Προς"
     className={classes.textField3}
     value={transport_detail[idx].to}
     onChange={handleDynamicChange('to', idx)}
     ref={x => to = x}
 />

enter image description here

I tried using ref, but as I see from the docs it is only used with class components.

Anyone has any solution to this?

Upvotes: 0

Views: 1252

Answers (1)

Domino987
Domino987

Reputation: 8804

Since you are already saving the values of the textfields in the state, you can remove the ref and just change, how you save the texts. This will let you easily swap the contents.

Here is a sandbox, to show you the final result.

Just like in your example, the functional component gets the values and the handleDynamicChange function. This will populate the textfields and updates on changes of the text.

The button simply calls handleDynamicChange for each value with the opposing key:

 handleDynamicChange("to", idx)({ target: { value: transport_detail[idx].from} });
 handleDynamicChange("from", idx)({ target: { value: transport_detail[idx].to} });

This will set the value of the from text field to the value of the to textfield and vice versa.

Obviously, you need to adjust the values to fit your data structure, but this should work, without the need of refs.

Upvotes: 1

Related Questions