update UI components when the prop changes in React

Question

I am trying to make an motor cycle social media using React.

when user search for a motorCycle model, it will show all the specs, as well as people who own the motor cycle, so that an user can reach out to them.

So, I am trying to pass all the owners list from a page to OwnersList.jsx as props, so that when the array of owners are ready(after fetching from MongoDB), OwnersList.jsx can show those people on the list.

I want it to show "LOADING..." when the prop array is empty, and as soon as the prop array is ready, I want it to re-render components.

However, even after the array arrives, the page is still showing "LOADING.." and it does't change.

What am I doing wrong here?

Also, that would be great if I can know what kind of basic concepts of React I am missing to be stuck in this kind of bug.

OwnersList.jsx

import React from "react";
import { useEffect, useState } from "react";

export default function OwnersList({ ownerObjectsArray }) {
  useEffect(() => {
    console.log(
      "ownerObjectsArray.length is like this ",
      ownerObjectsArray.length
    );
  }, [ownerObjectsArray]);
  if (ownerObjectsArray.length === 0) {
    console.log("yes, the array is empty. PLEASE WAIT");
    return <h2>Loading...</h2>;
  } else {
    console.log("ownerObjectsArray is not empty, so , i will set it as state.");
    return (
      <div>
        {ownerObjectsArray.map((ownerObject) => {
          return (
            <div key={ownerObject.username}>
              <h3>{ownerObject.username}</h3>
              <button>contact</button>
            </div>
          );
        })}
        OwnersList
      </div>
    );
  }
}

Answer 1

Make use of the ternary operator ( condition ? result : else ) to conditionally render JSX inside of one return statement.

Props changing will trigger a re-render so it will evaluate the ownerObjectsArray.length again, and determine which JSX to render.

Shouldn't need more code than this:

import React from 'react'

export default function OwnersList({ ownerObjectsArray }) {
  return ownerObjectsArray.length ? (
    <div>
      {ownerObjectsArray.map((ownerObject) => (
        <div key={ownerObject.username}>
          <h3>{ownerObject.username}</h3>
          <button>contact</button>
        </div>
      ))}
      OwnersList
    </div>
  ) : (
    <h2>Loading...</h2>
  )
}

There is one gotcha with "props changing". If the reference to the array doesn't change, then the re-render won't be triggered. So if you are just updating the same reference in the parent component, the child doesn't know that the array has changed.

Ex:

const ownerObjectsArray = []
// do some stuff
ownerObjectsArray.push(newObject)

The reference to the variable doesn't change, just one more addition to the same place in memory.

But, to create a new reference to the array, do something like this:

let ownerObjectsArray = []
// do some stuff
ownerObjectsArray = [...ownerObjectsArray, newObject]

Best yet, would be to control the array with useState and pass the state down to the component:

[ownerObjectsArray, setOwnerObjectsArray] = useState([])
// do some stuff
setOwnerObjectsArray((prev) => [...prev, newObject])