Question 280824 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Wait for .map() to finish, check returned array, then render results in React

I have a div in which I map through an array and return components with rendered results. For each array value I do an API call, multiple checks, and calculations, and, if the calculations are correct, I return the final JSX, if not, I return nothing.

The main component look like this:

export const FinalComponent = ({ items }) => {
return (
    <div>
        {items.map((item) => (
            <ItemComponent data={item} />
        ))}
    <div>
    ); 
};

The Item component looks like this:

export default function ItemComponent({ data }) {
  const [returnedItem, setReturnedItem] = useState(null);

  // API CALL SETS returnedItem

  // Necessary checks and calculations

  // If check length is more then 0, return component
  if (check > 0) {
      return (
          <div>
            <p>{returnedItem.name}</p>
          </div>
      );
   }
}

This works as it should. The problem is, let’s say in the "items" array I have 3 items and I go through each of them, but none of them goes through check and in the end, I return nothing. What I want, is if that scenario happens I want to show one message "Data not found". How can I wait for all .map items to finish and check the final .map array if there is no returned component in there?

Tags:

2

Answers


  1. 0

    I think what you could do is follow the "Presentational and Container Component pattern" as described in this article by Dan Abramov

    Personally, I’d keep ItemComponent as a presentational component, and keep FinalComponent as a container component.

    Inside FinalComponent Id do all the calculations for all of the data, and stick the result in an array of finalised data. Then you could do data.map on the already calculated data – that way ItemComponent could receive just the data to display.

    Login or Signup to reply.
  2. 0

    You can pass a function to your child component ItemComponent which marks a state of the parent component FinalComponent as true if some children have ‘check’ greater than 0. Then, you can check if that state is not marked as true to render "Data not found".

    export default function ItemComponent({ data, handleCheck }) {
  const [returnedItem, setReturnedItem] = useState(null);

  // An API call that sets the value of 'returnedItem'

  // Perform necessary checks and calculations

  // If the check length is more than 0, return the component
  if (check > 0) {
      // Call the 'handleCheck' function with 'true' to indicate that an item passed the checks
      handleCheck(true);

      return (
          <div>
            <p>{returnedItem.name}</p>
          </div>
      );
   }
}

    export const FinalComponent = ({ items }) => {
  const [someItemHasChecked, setSomeItemHasChecked] = useState(false);

  // Define a 'handleCheck' function to receive check results
  const handleCheck = (check) => {
    setSomeItemHasChecked(check);
  }

  return (
      <div>
          {items.map((item) => (
              // Pass the 'handleCheck' function as a prop to the 'ItemComponent'
              <ItemComponent data={item} handleCheck={handleCheck} />
          ))}

          {someItemHasChecked ? (
              // At least one item passed the checks
              null
          ) : (
              // No item passed the checks
              <div>Data not found</div>
          )}
      </div>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search