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>
);
}
Source: stackoverflow.com
Related Query
- Passing a function with React Context API to child component nested deep in the tree
- Passing API data from parent container to child component in React
- Passing a child component to an API component
- React: How do I fix getting undefined when passing api data to child component using axios?
- Passing props through Link to a child component to complete the url to make an api call
- Passing a function with React Context API to child component nested deep in the tree to update state value
- React passing parameter with arrow function in child component
- Connecting child components to store vs connecting parent component to store and passing down props
- Passing AJAX Results As Props to Child Component
- Passing a value onto a child component (this.props.children) in react
- passing data from child to parent component - react - via callback function
- React passing additional classNames to child component in addition to other props
- Passing setState to child component using React hooks
- v16.6.0 or higher Context API not working when child is used in component that provides the context
- Passing arguments from child component React
- Passing state from a child to parent component
- React: parent component props in child without passing explicitly
- React TypeScript Passing a function to child component
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- Passing a Redux Action to a child component with props
- Passing a function to Child Component through a Prop using ReactJS
- how to update parent's state from child component along with passing some information from child
- React Child component cant access the context API
- Passing state after .setState() to child component but not showing up in this.props for child component
- React.js: Parent state values not passing into child properties + Fetch API data cannot be accessed
- Passing function to child component this.props.children method undefined
- React router dom passing data from parent component to child router component does not pass the props.match
- React with TypeScript: passing a number variable to a child component
- Props are not passing from parent to child components in React Functional component
- Passing text field input from child component to parent
More Query from same tag
- Nested mapping reactjs
- Redux: Waiting for state changes before doing something else
- Aspnet server rendering debugging
- how do I create react js pattern for the following API
- How to make my custom tab component work with passing index to children and hiding panes?
- how to sort an array of objects with different keys
- how use ckeditor full version in react component
- Checking if local storage has object inside in ReactJS
- React Native - how to use local SVG file (and color it)
- transitioning to use redux with hooks
- React's setState() not working for nested DOM elements
- How to separate all of socket.io to a different file
- Adding setInterval to componentDidMount in React
- EventManager for Reactjs throws "addHandler is not a function"
- Why does useEffect() not updating messages object on new message?
- Converting array objects into json in react
- Efficient way to handle multiple imports in React
- React-Router passing props between main and sidebar components
- React Form Input Value Returning Undefined
- Redux: Distinguish objects in reducers
- Expand a row by click of table on a certain condition Ant Design table
- How to set the key dynamically based on the index of the loop
- Loop through loop React Material UI Javascript
- React Router - Routes in different components
- Cannot read property 'urls' of undefined after refresh
- Reactjs : TypeError: Cannot read property 'value' of undefined
- Components, ReactJS - Nothing was returned from render
- Material UI implementation in TypeScript
- react-bootstrap form button doesn't submit on first click
- Change resultant's key name in cube.js