score:1
the question here is what you really mean by "load".
1) if what you mean by "load" means actually to only render a component that was statically imported (already declared in the beginning of the file), then all you have to do is set some default value on the state i.e. :
state = {
rendercomponentx: false
}
and then on the dropdown change method change the state to true:
setstate({"rendercomponentx":true})
and inside render have a condition as :
{this.state.rendercomponentx && <componentx />}
2) if on the other hand what you want is really to dynamically load components then it's a bit more complicated :
you need to create a component that asynchronously loads other components. i normally create an array of randomkeys on the state of the component, at the constructor:
constructor(props) {
super(props);
// dynamic key generation for dynamic view loading
let randomkeys = [];
while(randomkeys.length < 10){
let y = math.random()*10000;
if(randomkeys.indexof(y) === -1) randomkeys.push(y);
}
this.state = {
randomkeys
};
}
so that each of the new imported components will have a different key.
in this case it's hardcoded to 0 but if you want to make this inside an iterator, you would have to create a variable to act as a counter to keep updating the index such as randomkeys[i]
where i
needs to grow from 0 to the length of components you want to import. also you need to make sure to generate enough keys in the constructor; this one is only generating 10, because this was for manual import, not within an iterator.
<asynccomponent key={this.state.randomkeys[0]} getcomponent={() => import('../login/login.js')} />
and my asynccomponent looks like this :
import react from 'react';
import proptypes from 'prop-types';
export default class asynccomponent extends react.component {
state = {
asyncmodule: null,
};
componentdidmount() {
let that = this;
this.unmounted = false;
this.props.getcomponent()
.then(module => {
console.log("asynccomponent loaded module:",module);
return module.default;
})
.then(asyncmodule => {
if(that.unmounted!==true) {
that.setstate({asyncmodule})
}
});
}
componentdidupdate() {
}
componentwillunmount() {
this.unmounted = true;
}
render() {
const {loader, ...childprops} = this.props;
const {asyncmodule} = this.state;
if(asyncmodule) {
return (<asyncmodule {...childprops} />)
}
if(loader) {
console.log('loader = ',loader);
return <div>loading...</div>;
}
return null;
}
}
asynccomponent.proptypes = {
getcomponent: proptypes.func,
loader: proptypes.element
};
Source: stackoverflow.com
Related Query
- react app, load components based on dropdown option
- How to dynamically render react components based on selected dropdown value
- How to load React components inside a container app via AJAX
- Selecting an option from a dropdown list causes react app to crash
- How do you load React components asynchronously based on different server side states?
- Switch theme based images on scroll in React App with Styled Components
- When to use ES6 class based React components vs. functional ES6 React components?
- "Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR" for React app after upgrading to Visual Studio 2019 16.10.0
- React Iterate and insert components based on count of array
- create react app - without typescript , got Error: Failed to load parser '@typescript-eslint/parser'
- how to load React app / Lib inside ExtJs Component
- How to load the google maps api <script> in my react app only when it is required?
- Cant load a react app after starting server
- How to sort list of React components based on different properties?
- Can a React app have components in different JS files without a build system?
- Extract CSS from SCSS and deferred lazy load in React app
- React app with Server-side rendering crashes with load
- Media queries not working with styled components in React App
- Changing components based on url with react router
- React class components - conditional styling based on props
- Ingress route - path based routing to different React app
- How to get size of an element in an react app that is totally based on functional components?
- Changing route parameters when a different dropdown option is selected in React
- Creating an installer for Electron React JS app - reactJS component doesn't load when run after install
- React Effector State Management Based on Dropdown
- Is there a clean way to conditionally load and render different components for the same React Router route?
- React App - Include /health - Health Endpoint for Load Balancer
- Universal rendering for react app based on create-react-app
- load options of a select box dynamically based on value of another select box in react
- How to load different .css files on different components of a react application?
More Query from same tag
- export default function returns undefined value in ReactJS
- How to infer a type on only one deconstructed variable from an object
- React not attaching event listeners
- React re-render conditional on state change without changing the conditional
- How to call methods in react-visjs-timeline
- react-select not resetting value on change of state
- Set URL to hyperlink with Rest call in React
- Why does onClick cause a loop?
- How to test Input with React Testing Library?
- Class names for dynamic children React
- Laravel + React: Handling API Data
- Display images from aws s3 using react dropzone and multer S3
- Stale data shown in react component
- Building a simple component for a 360 degree Image in React
- Test the state in parent component that was updated thru child component
- Map <option> of a materialize css <select> with ReactJS
- I have many checkbox it render as the description below I want to change the nested value its in blue circle in the pic
- how to switch component in React?
- invalidateQueries doesn't refetch/refresh the page
- How to write to Hasura from Gatsby?
- Nested routes inside Switch
- Accessing JSON from public folder in ReactApp
- How to remove HTML tag (not a specific tag ) with content from a string in javascript
- NextJS Router & Jest: How can I mock router change event
- Make counter based on response data after from Axios fetch
- AWS Amplify & React - Module not found: Can't resolve '@aws-amplify/analytics'
- react photoswipe gallery of thumbnails will not display as grid
- What will be called next after the mapStateToProps
- I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
- Confusion about the inputs array of useEffect(React Hooks API)