how to re-render child component on state change(Parent) reactjs

Question

I have an array list
logged in the child component which returns me the initial array.
After changing data from the API componentDidMount
I get an array of objects
if i log that array in the Parent component in the render function.
it is changing
but the child component it is not.
what shall i do ??

Solution 1

There are a few ways to do this but you basically need to tell your child component that the props have updated.

One way to do this would be to use shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
    return this.props.items[0] !== nextProps.items[0]);
}

You may want to have some better checking in you if statement to see if the array has changed but I think you get the idea.

You could also use componentDidUpdate or componentwillreceiveprops but they are used if you are updating state which will force a re-render

Solution 2

You should use the component lifecycle method, componentWillReceiveProps. componentDidMount is only called once after the component has mounted. componentWillReceiveProps is always called when the props change. For reference, visit: componentWillReceiveProps. It'll be something like this:

componentWillReceiveProps(nextProps) {
  if(this.props !== nextProps){
    // your code here
  }
}

Solution 3

Generally react rerenders child component automatically when there is a state change in parent component. I created this jsfiddle which works totally fine.

One reason the Array is not updating in the child component might be because the you are simply console logging the array and not using it to DOM.For that you can try using content in the array in the child component like simply

return (
    <div>this.props.Items[0].name</div>
)

So this might be once of the case.

But still if you want the console.log() to be printed without using the array elements in the child component then you can try

componentDidUpdate() {
    this.forceUpdate();
}

So whenever you are setting new state or updating the data, componentDidUpdate will be called there you can try to force rerender the component.Still untested.

Solution 4

React itself re-renders a component and its child components whenever a state is changed. You don't need to do it by yourself. However, you can decide whether to update the component or not by using shouldComponentUpdate().

Check Does render get called any time “setState” is called?

Solution 5

I have found a nice solution using key attribute. If we changed key property of a child component or some portion of React Component, it will re-render entirely. It will use when you need to re-render some portion of React Component or re-render a child component. Here is a example. I will re-render the full component.

import React, { useState, useEffect } from "react";
import { PrEditInput } from "./shared";

const BucketInput = ({ bucketPrice = [], handleBucketsUpdate, mood }) => {
  const data = Array.isArray(bucketPrice) ? bucketPrice : [];
  const [state, setState] = useState(Date.now());
  useEffect(() => {
    setState(Date.now());
  }, [mood, bucketPrice]);
  return (
    <span key={state}>
      {data.map((item) => (
        <PrEditInput
          key={item.id}
          label={item?.bucket?.name}
          name={item.bucketId}
          defaultValue={item.price}
          onChange={handleBucketsUpdate}
          mood={mood}
        />
      ))}
    </span>
  );
};

export default BucketInput;

View more solutions

Comments

[Amanshu Kataria]

You should avoid the use of this.forceUpdate until and unless there's no way left. In this case the component will update once state is changed.