reactjs - Dynamically modifying React component structure

Question

Let's say I have the following component, defined in Example.tsx module:

export const Example = () => {
  return (
    <Foo bar={true}>
      <div>some div</div>
    </Foo>
   
  )
};

I would like to dynamically modify it from the module I will be using it, so that subcomponents get changed, for example:

export const Example = () => {
  return (
    <Foo bar={true}>
      <p>changed div to p</p>
    </Foo>
   
  )
};

I know exactly that this is what I want to do. I know about props and children - let's assume I cannot use any of these in my case.

question from:https://stackoverflow.com/questions/65546074/dynamically-modifying-react-component-structure

Answer 1

Waitting for answers