Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

180
Views
React Dropdown prop callback resets title

Working with a Dropdown but having a problem with the props callback, which resets {titlename}. I want to highlight the selected value but because of props.callback() / props.callback(key), the component or value gets reset and the selected value is not shown in {titlename}. Without callback props, this works perfectly, so that {titlename} is updated onClick. Is there a way I can set the clicked value as the title while also sending the callback?

 const CategoriesDropdown = (props) => {
    
        const eventData = props.Data;
    
        const [dropdownOpen, setDropdownOpen] = useState(false);
        const [titleName, setTitleName] = useState(props.Title);
    
        function DropdownComponent() {
    
            function clicked(key, name) {
                if (name === titleName) {
                    //console.log("Same Clicked!");
                    props.callBack()
                } else {
                    //console.log("Different Clicked!");
                    setTitleName(name);
                    props.callBack(key)
                }
            }
    
            if (eventData)
            return (
                <Dropdown
                    isOpen={dropdownOpen}
                    toggle={() => setDropdownOpen(!dropdownOpen)}
                >
                    <DropdownToggle className="btn_white_dark_border dropdown_border" button caret>
                        <span>{titleName}</span>
                    </DropdownToggle>
                    <DropdownMenu>
                        {Object.entries(eventData).map(([key, eventData], i) => (
                            <DropdownItem
                                key={i}
                                value={eventData[key]}
                                onClick={() =>
                                    clicked(key, eventData.Name)
                                }
                            >
                            {(eventData.Name) + (eventData.Count)}
                            </DropdownItem>
                        ))}
                    </DropdownMenu>
                </Dropdown>
            );
        }
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!