React not reordering array of components on render

Question

I am trying to render a list of components in order with react, the component is updating this array of elements but is not re-ordering them.

Pseudo code;

class Form extends Component {
  //
  // .... other initialization code and logic
  //

  updatePositions() {
    //
    // re-order this.state.page.page_contents
    //
    this.setState({ page: this.state.page });
  }

  renderContents() {
    return this.state.page.page_content.map((c, i) => {
      return (<ContentItem
        key={ i }
        content={ c }
      />);
    });
  }

  render() {
    return (
      <div className="row">
        <div className="medium-12 columns">
          { this.renderContents() }
        </div>
      </div>
    );
  }
}

If i log out the results of page.page_content the items are being reordered in the array, however the form render is not re-rendering the contents in its new order

Are you make a workable example for us to have a look at? As we don't know the structure of everything or your code for re-ordering. — Deckerz
– Deckerz, Commented May 29, 2019 at 12:10
This is not a good approach this.setState({ page: this.state.page }) it implies you're mutating the state, if you want to change the state to a derived version of the previous state use: this.setState(prevState => ....). — Titus
– Titus, Commented May 29, 2019 at 12:11
@Titus What would i do inside that call back? Is this where i would set the new array contents? — James Gunn
– James Gunn, Commented May 29, 2019 at 12:13
Yes, what you return from the callback will be set as the new state, you could do something like this: this.setState(prevState => ({page: [...prevState.page].sort(.....)})) — Titus
– Titus, Commented May 29, 2019 at 12:14

Delta Kapp · Accepted Answer · 2020-12-08 07:46:05Z

1

You shouldn't be using array indices as keys if your array order is subject to change. Keys should be permanent, because React uses the keys to identify the components, and if a component receives a key that previously belonged to a different component, React thinks it is the same component as before.

Create unique keys for your elements that are permanent to those elements.

answered Dec 8, 2020 at 7:46

Delta Kapp

1,3222 gold badges8 silver badges7 bronze badges

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

Comments

Abdulla Thanseeh · Accepted Answer · 2019-05-29 12:11:05Z

0

you could try to force update

 renderContents() {
          this.forceUpdate();           
          return this.state.page.page_content.map((c, i) => {
              return (<ContentItem
                key={ i }
                content={ c }
              />);
            });

          }

answered May 29, 2019 at 12:11

Abdulla Thanseeh

10.8k3 gold badges16 silver badges17 bronze badges

Comments

bitten · Accepted Answer · 2019-05-29 12:12:41Z

0

Don't mutate this.state, directly. Bring it into a new variable and then add it back into state.

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

from: https://reactjs.org/docs/react-component.html

Instead, you should try:

  updatePositions() {
    const page_contents = [...this.state.page.page_contents]
    // re order page_contents
    this.setState({ page: { page_contents });
  }

answered May 29, 2019 at 12:12

bitten

2,5532 gold badges28 silver badges46 bronze badges

Comments

Waseem Raja Shaik · Accepted Answer · 2019-05-29 12:22:52Z

0

renderContents() {
    return this.state.page.page_content.map((c, i) => {
      return (<ContentItem
        key={ i }
        content={ c }
      />);
    });
  }

it's your code here - key={i} i is not changing so it will not re-render the component - if you want to re-render the component - please make sure that - key should change.

renderContents() {
    return this.state.page.page_content.map(c => {
      return (<ContentItem
        key={ c }
        content={ c }
      />);
    });
  }

c is content - if it's change then Component will re-render

this.setState({ page: this.state.page }) it's wrong - ur trying to set the same value in same variable again .

class Form extends Component {
  //
  // .... other initialization code and logic
  //

  updatePositions() {
    //
    // re-order this.state.page.page_contents
    //
    this.setState({ page: newValueFromAPI.page });
  }

  render() {
    const { page: { page_content } } = this.state
    return (
      <div className="row">
        <div className="medium-12 columns">
          { page_content.length > 0 && (
             page_content.map(c => <ContentItem key={c} content={c}/>)
          )}
        </div>
      </div>
    );
  }
}

edited May 29, 2019 at 12:22

answered May 29, 2019 at 12:16

Waseem Raja Shaik

3532 silver badges7 bronze badges

2 Comments

James Gunn Over a year ago

c={ c } does not work as it returns [object Object] for all content items, however c={ JSON.stringify(c) } does work. Not a nice hack but it does solve the problem

Waseem Raja Shaik Over a year ago

JSON.stringify(c) will do the work but if value didn't changed then why to re-render it something should be changed - if you have a value in object which keep on changing then keep that as KEY - it will re-render the component when it's changed

Collectives™ on Stack Overflow

React not reordering array of components on render

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related