React Dropdown Select Initialization and getting results back for key of displayed text

I am new to React. In an effort to assign a CpyMasterID (MySql key) to a User I am using a React Dropdown Select. I can get it to display a list of Company keys (from the MySQL dbase).

What I need it to do is display the Company Name of the assigned company (if the userscpymasterId is not null) and return the associated cpymasterid if a Company Name is selected.

Here is my existing code.


    import React, { Component } from 'react'
    import UserService from '../Services/UserService';
    import CpyMasterService from '../Services/CpyMasterService';
    
        class CreateUserSmallComponent extends Component {
            constructor(props) {
                super(props)
        
                this.state = {
                    isLoading:true,
                    isReadOnly:false,
                    userId: this.props.match.params.userId,
                    usersfirstName: '',
                    userslastName: '',
                    userscpymasterId: '',
                    cpymaster: []
                }
                this.saveOrUpdateUser = this.saveOrUpdateUser.bind(this);
            }
            componentDidMount(){
                CpyMasterService.getCpyMaster().then((res) => {
                    this.setState({ cpymaster: res.data});
               });
        
           if(this.state.userId === '_add'){
                    return
                }else{
                    UserService.getUserById(this.state.userId).then( (res) =>{
                        let user = res.data;
                        this.setState({isLoading:false});
                        this.setState({usersfirstName: user.usersfirstName,
                            userslastName: user.userslastName,
                            userscpymasterId: user.userscpymasterId
                        });
                    });
                }        
            }
            saveOrUpdateUser = (e) => {
                e.preventDefault();
                let user = {usersfirstName: this.state.usersfirstName, 
                    userslastName: this.state.userslastName, 
                    userscpymasterId: this.state.userscpymasterId
                    };
                    if(this.state.userId === '_add'){
                        UserService.createUser(user).then(res =>{
                            this.props.history.push('/users');
                        });
                    }else{
                         UserService.updateUser(user, this.state.userId).then( res => {
                             this.props.history.push('/users');
                    });
                }
            }
            
            changeFirstNameHandler= (event) => {
                this.setState({usersfirstName: event.target.value});
            }
        
            changeLastNameHandler= (event) => {
                this.setState({userslastName: event.target.value});
            }
        
            changeUsersCpyMasterIdHandler= (event) => {
                this.setState({userscpymasterId: event.target.value});
            }
        
            cancel(){
                this.props.history.push('/users');
            }
        
            getTitle(){
                if(this.state.userId === '_add'){
                    return <h3 className="text-center">Add User</h3>
                }else{
                    return <h3 className="text-center">Update User</h3>
                }
            }
        
            render() {
                return (
                    <div>
                        {this.state.isLoading &&
                        <h4>Getting Data....</h4>
                        }
                        <br></br>
                           <div className = "container">
                                <div className = "row">
                                    <div className = "card col-md-6 offset-md-3 offset-md-3">
                                        {
                                            this.getTitle()
                                        }
                                        <div className = "card-body">
                                            <form>
                                                <div className = "form-group">
                                                    <label> First Name: </label>
                                                    <input placeholder="First Name" name="usersfirstName" className="form-control" 
                                                        readOnly = {this.state.isReadOnly} value={this.state.usersfirstName} onChange={this.changeFirstNameHandler}/>
                                                </div>
                                                <div className = "form-group">
                                                    <label> Last Name: </label>
                                                    <input placeholder="Last Name" name="userslastName" className="form-control" 
                                                        readOnly = {this.state.isReadOnly} value={this.state.userslastName} onChange={this.changeLastNameHandler}/>
                                                </div>
        
                                                <div>
                                                    <select>
                                                        <option selected disabled = "true" > -- Select CpyMaster -- </option>
                                                        {
                                                            this.state.cpymaster.map((x,y)=> (<option key={x}>{y}</option>))
                                                        }
                                                    </select>
                                                </div>
                                                <button className="btn btn-success" disabled={this.state.isReadOnly} onClick={this.saveOrUpdateUser}>Save</button>
                                                <button className="btn btn-danger" onClick={this.cancel.bind(this)} style={{marginLeft: "10px"}}>Cancel</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
        
                           </div>
                    </div>
                )
            }
        }
        
        export default CreateUserSmallComponent

I thank all for input to help move me forward on this one.

Company Master Format


    public class CpyMaster {
        
        @Id
        @GeneratedValue(strategy = GenerationType.IDENTITY)
        private long cpymasterid;
        
        @Column(name = "cpymastername")
        private String  cpymasterName;
    
        @Column(name = "cpymasteraddress1")
        private String  cpymasterAddress1;
        
        @Column(name = "cpymasteraddress2")
        private String  cpymasterAddress2;
        
        @Column(name = "cpymastercity")
        private String  cpymasterCity;
        
        @Column(name = "cpymasterzip")
        private String  cpymasterZip;
    
        @Column(name = "cpymasterdocumentfolder")
        private String  cpymasterdocumentFolder;
    
        @Column(name = "cpymastercreated")
        private String  cpymasterCreated;
    
        @Column(name = "cpymasterupdated")
        private String  cpymasterUpdated;
        
        @Column(name = "states_statesid")
        private String  states_statesId;
    
        public long getCpymasterid() {
            return cpymasterid;
        }



Read more here: https://stackoverflow.com/questions/68457847/react-dropdown-select-initialization-and-getting-results-back-for-key-of-display

Content Attribution

This content was originally published by HighwayRob at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: