How to get the data from dropdown component in React and update state?

Question

I am a beginner React developer and I am stuck at this problem. I am trying to make a user registration form. It contains three text fields and two dropdown buttons. I am able to update the state from the data entered in the text fields but I cannot do the same with the dropbdown buttons. I am sharing the screenshot and the code below of my approach so far.

Here is the code for the same:

NOTE: App.js calls the component Registration.js which in turn calls the component User.js

Registration.js has all the logic to control the form, the state to hold data and the functions to handle forward and backward movement (code incomplete for this).

App.js

import React from 'react';
import './App.css';
import Registration from './components/Registration';

function App() {
  return (
    
      Hello World
      This is a sample app!
      Built by Anish Pal!
       
    
  );
}

export default App;

Registration.js

import React, { Component } from 'react';
import User from './User';

class Registration extends Component {

    // State to store user data
    state = {
        step: 1,
        userFirstName: '',
        userLastName: '',
        userEmail: '',
        userContact: '',
        userRole: '',
        userExperience: '',
        userEducation: '',
        userAddress: '',
        userBio: ''
    }

    // Move to the next page (component)
    nextStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        });
    };

    // Move to the previous page (component)
    prevStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        });
    };

    // Handle input field change (when data is entered)
    handleChange = input => e => {
        this.setState({ [input]: e.target.value });
    };

    render() {

        // Get the step counter
        const { step } = this.state;

        // Get the input fields
        const { userFirstName, userLastName, userEmail, userContact, userRole, userExperience, userEducation, userAddress, userBio } = this.state;

        // Assign a new variable to all the above
        const values =  { userFirstName, userLastName, userEmail, userContact, userRole, userExperience, userEducation, userAddress, userBio };

        // Switch the components based on the step counter
        switch(step) {
            case 1:
                return (
                    
                );
            default:
                return (
                    
                );
        }

    }
}

export default Registration

User.js

import React, { Component } from 'react';
import Card from 'react-bootstrap/Card';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';

class User extends Component {

    // Handle movement to next component
    continue = e => {
        e.preventDefault();
        this.props.nextStep();
    };

    render() {

        // Extract the props passed from parent
        const { values, handleChange } = this.props;

        // Handle dropdown selections 
        const handleJobSelect = e => {
            console.log(e);
            this.setState({ 
                userRole: e 
            });
        }

        return (
            
                
                    REGISTER USER
                    
                        Enter User Details
                        
                            
                                

                            
                            
                                
                                    
                                        
                                    
                                
                                
                                    
                                        
                                    
                                
                            
                            
                                

                            
                            
                                
                                    
                                        
                                    
                                
                            
                            
                                

                            
                            
                                
                                    
                                    Front-End Web Developer
                                    Back-End Web Developer
                                    Data Scientist
                                    Data Engineer
                                    Dev-Ops
                                    Cloud Architect
                                    
                                
                                
                                    
                                        No Experience (0-1 years)
                                        Some Experience (1-3 years)
                                        Medium Experience (3-5 years)
                                        Experienced (5-8 years)
                                        Specialist (8-10 years)
                                    
                                
                            
                        
                    
                
            
        )
    }
}

export default User

WHAT I HAVE TRIED

I changed the onClick={handleChange('usereRole')} to onChange={handleChange('userRole')} but that did not generate any change in the state. Using onClick() at least generates some response on the app though I keep getting undefined
I used onSelect={handleJobSelect} and then defined the function as :

const handleChange = e => {
  console.log(e);
}

Using this approach, I was able to successfully get the required value from the list into the console. However, I am still not able to update the state with this value. I need to update the state variable userRole with the item selected from the dropdown button.

Also, if anyone could tell me how to update the title of the button with the selected menu entry, it would be an added bonus (it is good to provide feedback to the user about their selection).

I would also like to mention I am using React-Bootstrap for the components so you guys can refer there for any additional information.

How to get the data from dropdown component in React and update state?

Answers (1)

Related Questions