• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

160
Views
React - State updating function not triggering component re-render in Chrome extension

Problem: For some reasons my submittedSev state does not seem to re-render in the DOM upon calling it's state updating function setSubmittedSev(). However, I can see console logs renders for sev parameter. Why is this happening?

Expected outcome – I expect the popup component to re-render upon calling submittedSev() function. And so for my text stored in data variable to also update.

popup.tsx

const App: React.FC<{}> = () => {
    const [submittedSev, setSubmittedSev] = useState('High');

    const data = [{
            title: 'Title example',
            summary: 'Summary Example',
            body: `${submittedSev}`,
            sevChange: true
     }
    ]

    const selectOptionHandler = (index) => {
     setCurrentOption(data[index]);
    };

    const submittedSevChangeHandler = (sev) => {
        setSubmittedSev(sev); // Not triggering re-render
        console.log(sev) // Correctly logs to the console
    };

    return (
    <div className="App">
        <aside>
            <ResponseList
                onSelectOption={selectOptionHandler}
                responseData={data}
            />
        </aside>
        <main>
            <ResponseDetail
                details={currentOption}
                onChangeSubmittedSevHandler={submittedSevChangeHandler}
            />
        </main>
    </div>
        );
      };

ResponseDetail.tsx - Child component

const ResponseDetail = (props) => {
  
    const submittedSevUpdateChangeHandler = (e) => {        
        props.onChangeSubmittedSevHandler(e.target.value);
    };

    return (
     <select onChange={submittedSevUpdateChangeHandler}>
      <option value="Low">Low</option>
      <option value="Medium">Medium</option>
      <option value="High">High</option>
     </select>
     )
    }
almost 3 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error