title: How to access each element in an array and make a page for all elements in the array in ReactJS?
body: <p>I'm new to programming and especially to React.JS. I managed to make checkboxes with an array of elements such as:</p>
  <p>optionsInstitutes = [' Administrasjon og ledelse', 'Datateknologi', 'Helse- og sosialfag',
  'Historie, filosofi og religion', ' Idrettsfag', ' Ingeniør- og teknologiske fag', ' Kunstfag', ' Litteratur og språk', 'Lærerutdanning og pedagogikk', 'Media- og kommunikasjonsfag', 'Musikk', 'Realfag', 'Samfunnsfag', ' Økonomi og juss']</p>
  <p><a href="https://i.stack.imgur.com/hJWmu.png" rel="nofollow noreferrer">the image of the checkbox I made looks as follows: </a></p>
  <p>Heres, the code for the checkbox:</p>
  <pre><code>export class Institute extends Component {
  
  
  constructor(props) {
      super(props);
      this.state = {
          optionsInstitute: [],
          isLoaded: false,
      }
      
  }
  
  
  
  // Our sample dropdown options 
  optionsInstitutes = [' Administrasjon og ledelse', 'Datateknologi', 'Helse- og sosialfag',
      'Historie, filosofi og religion', ' Idrettsfag', ' Ingeniør- og teknologiske fag', ' Kunstfag', ' Litteratur og språk', 'Lærerutdanning og pedagogikk', 'Media- og kommunikasjonsfag', 'Musikk', 'Realfag', 'Samfunnsfag', ' Økonomi og juss']
  
  
  
  
  render() {
  
      return (
  
          &lt;div style={{marginLeft: '7%', marginTop: '60px'}}&gt;
              &lt;h1&gt;Institute&lt;/h1&gt;
              &lt;Autocomplete
                  multiple
                  id=&quot;checkboxes-tags-demo&quot;
                  options={this.optionsInstitutes}
                  renderOption={(option, {selected}) =&gt; (
                      &lt;React.Fragment&gt;
                          &lt;Checkbox
                              icon={icon}
                              checkedIcon={checkedIcon}
                              style={{marginRight: 8}}
                              checked={selected}
                          /&gt;
                          {option}
                      &lt;/React.Fragment&gt;
                  )}
                  style={{width: 500}}
                  renderInput={(params) =&gt; (
                      &lt;TextField {...params} 
                                 variant=&quot;outlined&quot;
                                 label=&quot;Checkboxes&quot;
                                 placeholder=&quot;Favorites&quot;/&gt;
                  )}
              /&gt;
  
       &lt;/div&gt;
  </code></pre>
  <p>Now the problem is, I want to make a button, onClick, that can take me to the page of the chosen array element(institute). I need each of the elements in the array to have their own page because I'm going to explain and list what each institute can offer. Thank You!</p>