React array hooks don't work, new values don't display

Question

import React, { useState } from 'react';
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';

import { sections } from '../../data/sections';

export const NavigationTop = () => {
    const [mySections, setMySections] = useState(sections);

    const selectSection = (id) => {
        let newSections = mySections;
        newSections[id].name = mySections[id].name + '*'; 
        setMySections(newSections);
    };
    
    return (
        <Tabs defaultActiveKey="0" id="fill-tab-example" className="mb-3" onSelect={(k) => selectSection(k)} fill> 
            {mySections.map((el) => {
                const { id, name } = el;
                return (
                    <Tab id={id} key={id} eventKey={id} title={name}></Tab>
                );
            })}
        </Tabs>
    );
}

The selectSection event is triggered and newSections contains the new values, but the page does not show the new values.

Where is my error?

What is mySections? Is it an array? See: Functional component not updating DOM when updating state with useState for some info — Nick Parsons
– Nick Parsons, Commented Jan 10, 2023 at 9:19

Drew Reese · Accepted Answer · 2023-01-10 09:23:29Z

1

You are mutating the state object and not providing a new array reference for React's reconciliation process to trigger a component rerender.

const [mySections, setMySections] = useState(sections);

const selectSection = (id) => {
  let newSections = mySections; // <-- reference to state
  newSections[id].name = mySections[id].name + '*'; // <-- mutations
  setMySections(newSections); // <-- same reference
};

The mySections state reference never changes so React bails on rerendering the component. Shallow copy all state, and nested state, that is being updated.

Use a functional state update to correctly update from any previous state.

Example:

const selectSection = (id) => {
  setMySections(sections => sections.map(section => 
    section.id === id
      ? { ...section, name: section.name + "*" }
      : section
  ));
};

answered Jan 10, 2023 at 9:23

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ashish singh · Accepted Answer · 2023-01-10 09:12:40Z

0

try this change

let newSections = [...mySections];

what this does is make a copy of your array.

if you don't make a copy, reference doesn't change, and react does a shallow comparison ( only checks the reference and not value ) to see if UI needs to be updated.

answered Jan 10, 2023 at 9:12

ashish singh

6,9142 gold badges18 silver badges41 bronze badges

Collectives™ on Stack Overflow

React array hooks don't work, new values don't display

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related