title: Accessing variables or functions dynamically in React JS Hooks
body: <p>Hi I have a list of items like this:</p>
  <pre><code>const bookContents = [
  
      &lt;BookStart /&gt;,
      &lt;BookForword /&gt;,
      &lt;BookIntro /&gt;,
      &lt;BookFirstchapter /&gt;,
      &lt;BookSeconchapter /&gt;,
      &lt;BookEpilogue /&gt;,
      &lt;BookBackpage /&gt;
  ];
  </code></pre>
  <p>and I can access the first item by just writing this:</p>
  <pre><code>return(
  &lt;div&gt;
      {bookContents[0]}
  &lt;/div&gt;
  )
  </code></pre>
  <p>and access the number of items by just doing this:</p>
  <pre><code>return(
  &lt;div&gt;
      {bookContents.length}
  &lt;/div&gt;
  )
  </code></pre>
  <p>However I need to access it dynamically. All I have is this</p>
  <pre><code>myDialogue.Book
  </code></pre>
  <p>which equals the string &quot;bookContents&quot;.</p>
  <p>So how do I use <code>myDialogue.Book</code> to access <code>const bookContents</code> ?</p>
  <p>Is there a way I can tell react that when I write <code>myDialogue.Book</code> which equals the string <code>&quot;bookContents&quot;</code> I am specifically targetting <code>const bookContents</code>?</p>
  <p>Once I have this bit sorted I can move on with quite a big piece of work which is unfortunately being held up because of this.</p>
  <p>Any help really would be appreciated.
  Thank you.</p>