I'm writing an online educational book through React. I want to add images with automatic image numbers. So I have some JSX code like:

```
<Page>
<p>Some text.</p>
<Img src={cat} caption={This is a cat} />
<p>Some more text.</p>
<Img src={dog} caption={This is a dog} />
</Page>

```

The `<Img />` object is one I've made myself that formats the image and puts the caption underneath. However, I want to add a figure number to this caption: "Figure 1: This is a cat" and "Figure 2: This is a dog". This numbering should be done automatically, so that if I add an extra figure at the start, the numbers will shift. The big question is: how?

I've tried to add a Context to `<Page />` with a counter accessed by the `<Img />` components. However, the order in which the images render is not set in stone, resulting in random image numbers. So in some way the `<Img />` component needs to figure out what number image it is on the page: how many images precede it. Is this possible? The alternative is to pass along image numbers manually through `<Img src={cat} number={counter++} />` but this is a hassle and prone to errors.

I appreciate any suggestions that may solve this.