Andras/BoundlessFlowCampus2K

Fork 0

#236-dropdown-list-component #257

Merged

b24johka merged 4 commits from #236-dropdown-list-component into team_1_week_1

2026-04-14 10:03:19 +00:00

b24erika commented

2026-04-13 10:35:28 +00:00

Collaborator

Setup

The dropdown component is now added, to use the dropdown you have to follow this structure:

First import the dropdown into your "file":

import Dropdown from '../components/Dropdown/Dropdown';

Structure your data that you want to display in the drop down:

const cats = [
  { id: 1, value: "cat1" },
  { id: 2, value: "cat2" },
  { id: 3, value: "cat3" }
]

To display it on your view use this structure and set each parameter which are three, the title (description of dropdown), data you want to set the dropdown with and the function that the handler will pass the data to.

<div> 
    <Dropdown 
        title = "Pets" 
        data = {cats} 
        onChange = {(value) => updateView(value)}
    />
</div>

Specify the function that the value should be passed to (onChange event handler) which could be to update a view with new output-data.

function updateView(value){
    console.log(value);
}

## Setup The dropdown component is now added, to use the dropdown you have to follow this structure: First import the dropdown into your "file": ```javascript import Dropdown from '../components/Dropdown/Dropdown'; ``` Structure your data that you want to display in the drop down: ```javascript const cats = [ { id: 1, value: "cat1" }, { id: 2, value: "cat2" }, { id: 3, value: "cat3" } ] ``` To display it on your view use this structure and set each parameter which are three, the title (description of dropdown), data you want to set the dropdown with and the function that the handler will pass the data to. ```html <div> <Dropdown title = "Pets" data = {cats} onChange = {(value) => updateView(value)} /> </div> ``` Specify the function that the value should be passed to (onChange event handler) which could be to update a view with new output-data. ```javascript function updateView(value){ console.log(value); } ```

b24erika added 4 commits

2026-04-13 10:35:29 +00:00

Initial dropdown component 7bd3a3e194

eventlistener 248a62ffbd

added an eventlistener that is triggered when an user chooses a value and value is fetched on the target

Setting title as a hidden option 7c11f6e1a5

Instead of having an label I've added an hidden option so the dropdown is described in it self.

Added comment, variable rename c5083dcdac

added a more clear naming of variables

b24erika commented

2026-04-13 10:50:48 +00:00

Author

Collaborator

The dropdown-function is created with an array of data, the map()-function transforms every element in the array to an option-element. The dropdown uses an event handler to access the value of the element that is passed into the function.

b24erika self-assigned this

2026-04-13 10:52:13 +00:00

b24erika added the

frontEnd

Team 1

needs review

labels

2026-04-13 11:01:24 +00:00

c22abdal was assigned by c24elipe

2026-04-13 12:09:10 +00:00

c22abdal was unassigned by c24elipe

2026-04-13 13:12:22 +00:00

c24elipe requested review from c22abdal

2026-04-13 13:12:50 +00:00

c22abdal commented

2026-04-14 08:59:30 +00:00

Collaborator

Everything works as mentioned in the Setup comment above, the code looks clean and is working with no errors.

One issue is that this branch has something wrong, running the app locally (frontend npm start) causes white page with the error


react.development.js:517 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
react.development.js:1263 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at App (App.js:19:1)

Everything works as mentioned in the Setup comment above, the code looks clean and is working with no errors. One issue is that this branch has something wrong, running the app locally (frontend npm start) causes white page with the error ``` react.development.js:517 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem. react.development.js:1263 Uncaught TypeError: Cannot read properties of null (reading 'useState') at App (App.js:19:1) ```

c22abdal added

reviewed

and removed

needs review

labels

2026-04-14 08:59:39 +00:00

b24johka commented

2026-04-14 10:03:15 +00:00

Collaborator

The review has been conducted in a correct way, i will accept this pull request.

b24johka merged commit b4c118479b into team_1_week_1

2026-04-14 10:03:19 +00:00

b24johka referenced this pull request from a commit

2026-04-14 10:03:21 +00:00

Merge pull request '#236-dropdown-list-component' (#257) from #236-dropdown-list-component into team_1_week_1

b24erika commented

2026-04-14 10:25:50 +00:00

Author

Collaborator

@c22abdal wrote in #257 (comment):

Everything works as mentioned in the Setup comment above, the code looks clean and is working with no errors.

One issue is that this branch has something wrong, running the app locally (frontend npm start) causes white page with the error


react.development.js:517 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
react.development.js:1263 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at App (App.js:19:1)

Thanks for the review! I am unsure why you get this error, I have had issues with npm start if the containers are not up and running. I'm using npm start when developing so I personally did not get any errors like that, perhaps some sort of version error? Did you try rebuilding it before running npm start?

@c22abdal wrote in https://git.webug.se/Andras/BoundlessFlowCampus2K/pulls/257#issuecomment-2563: > Everything works as mentioned in the Setup comment above, the code looks clean and is working with no errors. > > One issue is that this branch has something wrong, running the app locally (frontend npm start) causes white page with the error > > ```text > > react.development.js:517 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: > 1. You might have mismatching versions of React and the renderer (such as React DOM) > 2. You might be breaking the Rules of Hooks > 3. You might have more than one copy of React in the same app > See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem. > react.development.js:1263 Uncaught TypeError: Cannot read properties of null (reading 'useState') > at App (App.js:19:1) > ``` Thanks for the review! I am unsure why you get this error, I have had issues with ```npm start``` if the containers are not up and running. I'm using ```npm start``` when developing so I personally did not get any errors like that, perhaps some sort of version error? Did you try rebuilding it before running ```npm start```?

c22abdal commented

2026-04-14 10:29:35 +00:00

Collaborator

@b24erika wrote in #257 (comment):

@c22abdal wrote in #257 (comment):
Everything works as mentioned in the Setup comment above, the code looks clean and is working with no errors.
One issue is that this branch has something wrong, running the app locally (frontend npm start) causes white page with the error
react.development.js:517 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
react.development.js:1263 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at App (App.js:19:1)
Thanks for the review! I am unsure why you get this error, I have had issues with npm start if the containers are not up and running. I'm using npm start when developing so I personally did not get any errors like that, perhaps some sort of version error? Did you try rebuilding it before running npm start?

Yes, according to the error there is a possibility of React version mismatch.

@b24erika wrote in https://git.webug.se/Andras/BoundlessFlowCampus2K/pulls/257#issuecomment-2649: > @c22abdal wrote in #257 (comment): > > > Everything works as mentioned in the Setup comment above, the code looks clean and is working with no errors. > > One issue is that this branch has something wrong, running the app locally (frontend npm start) causes white page with the error > > ```text > > > > react.development.js:517 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: > > 1. You might have mismatching versions of React and the renderer (such as React DOM) > > 2. You might be breaking the Rules of Hooks > > 3. You might have more than one copy of React in the same app > > See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem. > > react.development.js:1263 Uncaught TypeError: Cannot read properties of null (reading 'useState') > > at App (App.js:19:1) > > ``` > > Thanks for the review! I am unsure why you get this error, I have had issues with `npm start` if the containers are not up and running. I'm using `npm start` when developing so I personally did not get any errors like that, perhaps some sort of version error? Did you try rebuilding it before running `npm start`? Yes, according to the error there is a possibility of React version mismatch.