How to connect 2 text box fields with each other in reactjs

See more:

Javascript

ReactJS

I have a working ReactApp which is super simple. It only has 2 text boxes which renders data from 2 columns via SQL table called 'cicmpy'. I've made an api which sends data to the application and doesn't have to worry about that part.

But now my concern is how should I connect those 2 boxes which are Customer Name and Customer Number. What I want to see is when an user enter either customer number or name the other field has to fill with the matching/respective field.

Ex : I enter "ABC Manufacturing" and select from the drop down from the "Customer Name" text box. So once I click somewhere else in the page the "Customer No" text box should be filled with the respective number, let's say 53450 for this example.

Right now each text box fields are independent from each other and no connection with each other.

The column names for Customer ID is "cpm_code" and for Customer Name is "cmp_name".

What I have tried:

import React, { Component } from 'react';  
import TextField from '@material-ui/core/TextField';  
import Autocomplete from '@material-ui/lab/Autocomplete';  
import AppBar from '@material-ui/core/AppBar';  
import Toolbar from '@material-ui/core/Toolbar';  
import './App.css';  
import axios from 'axios';  
export class Autocom extends Component {  
        constructor(props) {  
                super(props)  
                this.state = {  
                        ProductData: [],
                        value: ""
                }  
        }  
        componentDidMount() {  
                axios.get('http://localhost:59545/Api/cicmpies').then(response => {  
                        console.log(response.data);  
                        this.setState({  
                                ProductData: response.data  
                        });  
                });  
        }  
        render() {  
                return (  
                    <>
                        <AppBar className="mrg" position="static">  
                                        <Toolbar>EDGE Manufacturing - Macola Order Entry Customization</Toolbar>
                                </AppBar>
                        <div className='text'>  
                                
                                <Autocomplete className="pding"  
                                        id="customer_name"  
                                        options={this.state.ProductData}  
                                        getOptionLabel={option => option.cmp_name}  
                                        style={{ width: 300 }}  
                                        renderInput={params => (  
                                                <TextField {...params} label="Customer Name" variant="outlined" fullWidth />  
                                        )}  
                                />  
                        </div>
                        <div className='text'>  
                                <Autocomplete className="pding"  
                                        id="customer_id"  
                                        options={this.state.ProductData}  
                                        getOptionLabel={option => option.cmp_code}  
                                        style={{ width: 300 }}  
                                        renderInput={params => (  
                                                <TextField {...params} label="Customer ID " variant="outlined" fullWidth />  
                                        )}  
                                />  
                        </div>
                    </>
                )  
        }  
}  
export default Autocom