React Dynamically download Components and get data from all child components - reactjs

Question

I am new to react and this is more of a design question where I intend to
1) Download Components from static hosted site and display them.
2) Get all data from Components through (lets say) a download option
Based on my practice, I learnt that parent component passes a callback/onChangehandle to child as props and it maintains a copy of the state of child components though child components render the HTML. However, I want to dynamically download components from API/Static hosting based on user's input and then get a string representation/state of data from all these components. Each component would have different state data and thus I cannot write a common onChangehandle.
Question:-
1) Is such a design possible with react ? Will each component be able to upload its lib to cloud ?
2) Can we enforce methods to be written on each component so that parent can call each component's specific method and get the data ?
Pseudo Code I am looking for:-
class Parent extends Component {
downloadData = (event) => {
for(childComponents 1 to n){
all_data += childComponent.getState()
}
pdf(all_data)
}
render(){
// Render Child components
for(childComponents 1 to n) {
ChildComponent = // Load from API/Static hosting
}
<button onClick="downloadData"/>
}
}

Answer 1

What you want to accomplish is definitely possible. I am not really into class components so I wrote the example with react hooks.
What you can do to load data from an external component is the following: Pass down a callback into the component which you call on a successful load to receive the data. Nevertheless I would not suggest to do so. I would fetch the data from a different api than the components. You should always split data to visualise and components which represent the user interface.
Code to load an external react module:
import React, { useEffect, useState, useRef } from 'react'
export function Loader({ id }) {
const [loading, setLoading] = useState(true)
const ref = useRef()
const [data, setData] = useState({})
useEffect(() => {
async function fetchReactComponent() {
await import(
/*webpackIgnore: true*/ `https://example.com/react-components/${id}`
).then(module => {
setLoading(false)
const node = module["ReactComponent"](data, setData)
if (ref.current) {
ref.current.innerHTML = ''
if (typeof node === 'string') {
ref.current.innerHTML = node
} else {
ref.current.appendChild(node)
}
}
})
}
fetchReactComponent()
// eslint-disable-next-line
}, [id])
return loading ? <div>Loading...</div> : <div ref={ref} />
}
External React module:
function ReactComponent(data, setData) {
// do something with the data
return '<h1>A component</h1>'
}
export { ReactComponent }