Conditional/dynamic rendering

You can not call hooks conditionally. Calling hooks in loops, although I think it could be legal, is also at least shady and should be avoided. React Hooks must be called in the exact same order in every component render. Call them at the top level of a component (i.e. don’t nest it inside of anything more than the component ifself).

More on topic of "Rendered more hooks than during the previous render" error

I did ask if it’s the useState hook which causes the error because I suppose you did something like below:

if (showAnotherMarkdown) {
  const [markdown, setMarkdown] = React.useState();
}

Changing state of components

How could I dynamically create Markdown components for different interactive content

I don’t know anything about react-native-markdown-display, but I checked out their documentation and it seems that if you want to change what content the Markdown component displays you just provide a different data to it. Let’s say you’ve got two constants holding markdown and two buttons which let you change which one is used:

const markdown1 = `# h1 This is a markdown`;
const markdown2 = `# h1 This is another markdown`;

const [markdown, setMarkdown] = React.useState(markdown1);

return (
  <div>
    My Markdown:

    <Markdown>
      {markdown}
    </Markdown>

    <Button onClick={() => setMarkdown(markdown1)}>
      show first markdown 
    </Button>

    <Button onClick={() => setMarkdown(markdown2)}>
      show the other markdown
    </Button>
  </div>
);

Instead of constants these could be files, data fetched from a server, user input – sky is the limit. What matters is what setMarkdown is called with, which in turn determines what sits in the state and then is passed to the Markdown component.

Rendering lists

If you need to display a different set of elements based on some arbitrary data there is a number of ways you can achieve it.

You hold data in the state, like this:

const [markdownList, setMarkdownList] = React.useState([]);

then you map the data to elements, e.g. like this:

return (
  <div>
    Markdown list:
    
    {markdownList.map((markdown, index) => (
      <Markdown key={index}>
        {markdown}
      </Markdown>
    ))}
    
  </div>
);

I don’t know where your markdown comes from so I will just provide a general way of adding some to the list:

function addMarkdown(newMarkdown) {
  setMarkdownList(prevList => [...prevList, newMarkdown]); //appending to the end 
}

If you hold an object or an array in the state, se sure to create a new one each time you want to update it since React compares references to tell if a change was made and does not examine contents of them.

A classic example is a Todo List. I encourage you to check out some examples. Here is a full example of Todo list on codesandbox.

Component tree

how does react differentiate react components?

It creates a virtual DOM tree. Elements of this tree correspond to elements displayed on the screen.

Also, JSX is transpiled to React.createElement calls:

const element = (
  <h1 className="greeting">
    Witaj, świecie!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Witaj, świecie!'
);

You can see that 'h1' was passed to createElement so this is another piece by which React differenciates components – by the function (or tag) which is used to create the DOM tree.

In the example above I used a map to create an arbitrary set of elements. There is a caveat to that.

JSX elements directly inside a map() call always need keys!

(React docs on rendering lists)

The key is also used to differenciate elements. React holds data for each element and the key is necessary to assign state to the element which owns it. I used index as key which is fine as long as you don’t perform any manipulation on the list other than adding to the end. If, for example, you would remove an element from the beginning of the list and the indices would shift, the states would not shift with them and second element would get state from the first, third from second and so on. The key needs to be unique. IDs and hashes are good as keys because they are usually unique.

Disclaimer

You didn’t provide and code so I had to guess some things and I’m not certain if anyhing from what I wrote above is going to be any helpful. Feel free to ask furher questions.