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) {
    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 (

        <div style={{marginLeft: '7%', marginTop: '60px'}}>
            <h1>Institute</h1>
            <Autocomplete
                multiple
                id="checkboxes-tags-demo"
                options={this.optionsInstitutes}
                renderOption={(option, {selected}) => (
                    <React.Fragment>
                        <Checkbox
                            icon={icon}
                            checkedIcon={checkedIcon}
                            style={{marginRight: 8}}
                            checked={selected}
                        />
                        {option}
                    </React.Fragment>
                )}
                style={{width: 500}}
                renderInput={(params) => (
                    <TextField {...params} 
                               variant="outlined"
                               label="Checkboxes"
                               placeholder="Favorites"/>
                )}
            />

     </div>

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!

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

Leave a Comment