How to modify parameter in react component for reusability?

[real charm]

I am trying to modify a react parameter in a component but am running into a hydration error and am not sure what the best way to solve it is.

Error: Text content does not match server-rendered HTML.
Warning: Text content did not match. Server: "user_id: string" Client: "user_id: string: string"
See more info here: https://nextjs.org/docs/messages/react-hydration-error

import React from 'react';
import APIEndpointForm, { APIEndpointFormProps } from '@src/components/api/api-endpoint/endpoint-form';
import { FormInputProps } from '@src/components/form';

export default function APIEndpointFormEtc({ btn_text, parameters, get_response }: APIEndpointFormProps) {
        parameters.map((param : FormInputProps) => {
            const name = `${param.name}: ${param.type}`
            param.name = name;
            return param;
        })
    
    return (
        <APIEndpointForm
            btn_text={btn_text}
            parameters={parameters}
            get_response={get_response}            
        />
    )
}


export function GetUser() {
    return (
        <APIEndpointFormEtc
           ...
        />
    )
}

If I remove the parameters.map line it all works fine. But it ends up being a lot of code duplication if I move that out of the component.

Just to be clear, what I am trying to do is modify the parameters before the component is created in a reusable manner. Ideally, Id like to solve this without disabling server side rendering.
Any help is appreciated.

[merry cloak]

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)

[steady zenith]

try passing the map directly

export default function APIEndpointFormEtc({ btn_text, parameters, get_response }: APIEndpointFormProps) {
       
    return (
        <APIEndpointForm
            btn_text={btn_text}
            parameters={parameters.map((param : FormInputProps) => {
                const name = `${param.name}: ${param.type}`
                param.name = name;
                return param;
            })}
            get_response={get_response}            
        />
    )
}

[real charm]

same result when I do that

[steady zenith]

how about this?

export default function APIEndpointFormEtc({
  btn_text,
  parameters,
  get_response,
}: APIEndpointFormProps) {
  return (
    <APIEndpointForm
      btn_text={btn_text}
      parameters={parameters.map((param: FormInputProps) => ({
        ...param,
        name: `${param.name}: ${param.type}`,
      }))}
      get_response={get_response}
    />
  );
}

[real charm]

That works! Thank you. Not sure I understand why it works though.

[steady zenith]

in react, you need to create a new reference instead of mutating