Guide on how to pass the chosen dropdown value from a custom component back to the main component

Question

Guide on how to pass the chosen dropdown value from a custom component back to the main component

I've developed a customized MUI select component in React and have integrated it multiple times within another component as shown:

customDropdown.js


import * as React from 'react';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Chip from '@mui/material/Chip';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import ArrowCircleUpIcon from '@mui/icons-material/ArrowCircleUp';
import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown';
import { useLocation } from 'react-router-dom';

export default function CustomDropdown({ inputLabelId, dropdownId, dropdownValue1, dropdownLabel }) {
    const [dropdownValue, setDropDownValue] = React.useState('');
    const location = useLocation();

    const handleChange = (event) => { 
        setDropDownValue(event.target.value);  
    };

    React.useEffect(() => {
        setDropDownValue(dropdownValue1);
      }, [location, dropdownValue1])

    return (
        <FormControl sx={{ m: 1, minWidth: 220 }}>
            <InputLabel id={inputLabelId}>{dropdownLabel}</InputLabel>
            <Select id={dropdownId} value={dropdownValue} label={dropdownLabel} onChange={handleChange}>
                <MenuItem value={-1}><Chip size="medium" icon={<ArrowCircleDownIcon />} label="Decreasing" color="error" /></MenuItem>
                <MenuItem value={0}><Chip size="medium" icon={<CheckCircleOutlineIcon />} label="No Trend" color="primary" /></MenuItem>
                <MenuItem value={1}><Chip size="medium" icon={<ArrowCircleUpIcon />} label="Increasing" color="success" /></MenuItem>
            </Select>
        </FormControl>
    );
}

And I am invoking the above component from another component multiple times by providing different values for labelId, dropdownID, etc.,

MainComponent.js


import CustomDropdown from '../components/customDropdown.js';

<CustomDropdown inputLabelId="Lbl_Id1" dropdownId="Id1" dropdownValue1={firstSelect} dropdownLabel="First" />
<CustomDropdown inputLabelId="Lbl_Id2" dropdownId="Id2" dropdownValue1={secondSelect} dropdownLabel="Second" />

When trying to retrieve the values of firstSelect & secondSelect after altering the dropdown values, there seems to be no impact.

If anyone could guide me on how to obtain the values for each dropdown in MainComponent.js, it would be greatly appreciated.

Thank you,

javascript reactjs material-ui

Answer 1

Answer №1

Within the realm of React, there exists a fundamental concept known as "lifting up the state".

This essentially involves maintaining the state at the parent level and passing it down to child components along with any necessary callbacks.

In your current situation: You are successfully sending the state to the child component but failing to include the callback functions (setFirstselect or setSecondSelect) needed for updating the state.

Looking specifically at the triggerdropdown.js file, you have an internal state (dropdownvalue) that is being updated locally, thus not affecting the parent state. To address this, I recommend creating separate useState hooks for each TriggerDropDown component in the parent level (maincomponent.js) and passing both the value and corresponding callback to the child component for state updates.

Here's a code snippet to illustrate this:

import TriggerDropDown from '../components/triggerDropDown.js';
const [firstSelect,setFirstselect]=useState();
const [secondSelect,setSecondselect]=useState()
<TriggerDropDown inputLabelId="Lbl_Id1" dropdownId="Id1" dropdownValue1={firstSelect} setState={setFirstselect} dropdownLabel="First" />
<TriggerDropDown inputLabelId="Lbl_Id2" dropdownId="Id2" dropdownValue1={secondSelect} setState={setSecondselect} dropdownLabel="Second" />

And in the TriggerDropdown.js file:

export default function TriggerDropDown({ inputLabelId, dropdownId, dropdownValue1, dropdownLabel, setState }) {
    const [dropdownValue, setDropDownValue] = React.useState('');
    const location = useLocation();

    const handleChange = (event) => { 
        setDropDownValue(event.target.value); 
        setState(event.target.value) 
    };

    React.useEffect(() => {
        setDropDownValue(dropdownValue1);
      }, [location, dropdownValue1])

    return (
        <FormControl sx={{ m: 1, minWidth: 220 }}>
            <InputLabel id={inputLabelId}>{dropdownLabel}</InputLabel>
            <Select id={dropdownId} value={dropdownValue} label={dropdownLabel} onChange={handleChange}>
                <MenuItem value={-1}><Chip size="medium" icon={<ArrowCircleDownIcon />} label="Decreasing" color="error" /></MenuItem>
                <MenuItem value={0}><Chip size="medium" icon={<CheckCircleOutlineIcon />} label="No Trend" color="primary" /></MenuItem>
                <MenuItem value={1}><Chip size="medium" icon={<ArrowCircleUpIcon />} label="Increasing" color="success" /></MenuItem>
            </Select>
        </FormControl>
    );
}

I hope this explanation proves helpful.

Answer 2

Within the realm of React, there exists a fundamental concept known as "lifting up the state".

This essentially involves maintaining the state at the parent level and passing it down to child components along with any necessary callbacks.

In your current situation: You are successfully sending the state to the child component but failing to include the callback functions (setFirstselect or setSecondSelect) needed for updating the state.

Looking specifically at the triggerdropdown.js file, you have an internal state (dropdownvalue) that is being updated locally, thus not affecting the parent state. To address this, I recommend creating separate useState hooks for each TriggerDropDown component in the parent level (maincomponent.js) and passing both the value and corresponding callback to the child component for state updates.

Here's a code snippet to illustrate this:

import TriggerDropDown from '../components/triggerDropDown.js';
const [firstSelect,setFirstselect]=useState();
const [secondSelect,setSecondselect]=useState()
<TriggerDropDown inputLabelId="Lbl_Id1" dropdownId="Id1" dropdownValue1={firstSelect} setState={setFirstselect} dropdownLabel="First" />
<TriggerDropDown inputLabelId="Lbl_Id2" dropdownId="Id2" dropdownValue1={secondSelect} setState={setSecondselect} dropdownLabel="Second" />

And in the TriggerDropdown.js file:

export default function TriggerDropDown({ inputLabelId, dropdownId, dropdownValue1, dropdownLabel, setState }) {
    const [dropdownValue, setDropDownValue] = React.useState('');
    const location = useLocation();

    const handleChange = (event) => { 
        setDropDownValue(event.target.value); 
        setState(event.target.value) 
    };

    React.useEffect(() => {
        setDropDownValue(dropdownValue1);
      }, [location, dropdownValue1])

    return (
        <FormControl sx={{ m: 1, minWidth: 220 }}>
            <InputLabel id={inputLabelId}>{dropdownLabel}</InputLabel>
            <Select id={dropdownId} value={dropdownValue} label={dropdownLabel} onChange={handleChange}>
                <MenuItem value={-1}><Chip size="medium" icon={<ArrowCircleDownIcon />} label="Decreasing" color="error" /></MenuItem>
                <MenuItem value={0}><Chip size="medium" icon={<CheckCircleOutlineIcon />} label="No Trend" color="primary" /></MenuItem>
                <MenuItem value={1}><Chip size="medium" icon={<ArrowCircleUpIcon />} label="Increasing" color="success" /></MenuItem>
            </Select>
        </FormControl>
    );
}

I hope this explanation proves helpful.

Guide on how to pass the chosen dropdown value from a custom component back to the main component

Answer №1

Similar questions

having trouble installing ReactJS on MacOS

Encountering null injector errors when running ng test on an Angular application

Guide to enclosing selected text within a span tag and positioning a div in relation to it using JavaScript

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

Transforming instance of a Class into Json format for WebService

The expansion animation for the Nextjs/React accordion box did not work as expected when utilizing tailwindcss

Steps for including a subdocument within a mongoose schema

Issue with Material-UI tab not showing the component upon page load

Encountering Err_Connection_Refused while working with MVC WebAPI 2 and AngularJS

All components in my app are being styled by CSS files

Methods for presenting text from an object array using Angular

The bundle.js file is displaying HTML code instead of JavaScript

Organizing angular shapes in alphabetical order

Creating a personalized scrollball feature within a fancybox

The Ionic search bar will only initiate a search once the keyboard is no longer in view

Error is being thrown due to defining a variable after it has already been declared and

Is there a way to specifically transmit ComponentArt CallbackEventArgs from a JavaScript function during a callback?

Exploring the depths of React by gaining access to nested objects and arrays

What methods can be used to selectively intercept routes?

Maintaining the active state in Bootstrap, even when manually entering a URL, is essential for smooth