score:1

Accepted answer

you can provide a function as the only child of the apifetcher and call it once the data is loaded:

<apifetcher url={apiurl}>
  {(items) => {
    return <companyprofile items={items} />;
  }}
</apifetcher>

and then in apifetcher:

  if (error) {
    return <div>error: {error.message}</div>;
  } else if (!isloaded) {
    return <div>loading...</div>;
  } else {
    // call the provided function
    return props.children(items);
  }

score:1

you can use a higher-order component.

a higher-order component (hoc) is an advanced technique in react for reusing component logic. hocs are not part of the react api, per se. they are a pattern that emerges from react’s compositional nature.

example:

function withapiresponse(wrappedcomponent, url, ...) {
 return function apifetcher(props) {
  ...
  const somedata = ...;
  const items = ...;
  return (
      <div>
        <wrappedcomponent somedata/>
        <companyprofile items={items} />
      </div>
  );
 }
}

const comments = withapiresponse(commentscomponent, "/comments");
const reviews = withapiresponse(reviewscomponent, "/reviews");

function app() {
  return (
    <div>
      <comments />
      <reviews />
    </div>
  );
}

Related Query

More Query from same tag