How can i pass a value to a parent component

[naive oak]

I want to make a settings page. I have a page.js file, and from there I render a component called "settings" . In that component, I have all of the field components. Now, I could just directly put them in the form component, but then they wouldn't be reusable. The 'Save Changes' button is also in the settings component, on click I want to send an API request to my endpoint that contains all of the values from the field components.

[neon hinge]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[olive sand]

you can have a parent components, that holds all the current settings and the single setting components handles the functionality of the specific settings. The value comes from top and also the change function that will be executed on change comes from top. If you now change the value, the specific setting will be changed

[naive oak]

wdym by "single setting components handles the functionality of the specific settings" so what component makes the api request?

[olive sand]

I thought that you parent component will make the api call?

My „settings component“ is your „field component“. So the component that renders the setting/field and adds functionality

[naive oak]

yes but how will that top component know the values of the fields?

[olive sand]

Because the top component passes the value and the value change function down

[naive oak]

ah okay, could you just give me an example of how the field compoent would look?

[olive sand]

Yea, in pseudocode it’s:

parent:
useState with all settings as object

onChange function, that updates the key inside the object of the useState

return: a map of RenderSetting-Component with props of value and onChange

RenderSetting-Component (for example for text):

return: Input Element with value from props. OnChange calls the onChange function from props.

[naive oak]

so im passing the state from the top component, then in each component changing it?

[olive sand]

Yes

[naive oak]

okay i understand now, thank you

[olive sand]

Does that solves your problem?

[neon hinge]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1244013702949372045 message)