How to access each element in an array and make a page for all elements in the array in ReactJS?

I’m new to programming and especially to React.JS. I managed to make checkboxes with an array of elements such as:

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’]

the image of the checkbox I made looks as follows:

Heres, the code for the checkbox:

export class Institute extends Component {

constructor(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 (

        <div style={{marginLeft: '7%', marginTop: '60px'}}>
                renderOption={(option, {selected}) => (
                            style={{marginRight: 8}}
                style={{width: 500}}
                renderInput={(params) => (
                    <TextField {...params} 


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!

1 thought on “How to access each element in an array and make a page for all elements in the array in ReactJS?”

Leave a Comment