I’m trying to create a component that will have an input and a button. In input, the user enters his nickname. This nickname, that is, the input value, must be stored in a variable. This variable is needed for a function that creates a link to which the user will be redirected by the button.

My component (next.js)

'use client'

import { Button } from '@nextui-org/react';
import Link from 'next/link';
import React, { useState } from 'react';

let inputValue: any;
let setInputValue: any;

const InputComponent = () => {
  [inputValue, setInputValue] = useState('');

  const handleInputChange = (event: any) => {
    setInputValue(event.target.value);
  };

  return (
    <div className='flex flex-col gap-2'>
        <input id='areaNick' type="text" value={inputValue} onChange={handleInputChange} placeholder='Введите никнейм' className='bg-transparent border-b-2 border-blue-300 text-white placeholder:text-blue-300 focus:outline-none' />
        <Button radius="lg" className='bg-white text-blue-500 uppercase font-semibold' type="submit" as={Link} href="https://cubeinside.easydonate.ru/">Купить</Button>
        <p>{inputValue}</p>
    </div>
  );
};

export default InputComponent;

Function

client.getPaymentLink(customer, serverID, products, url, email, coupon).then((link) => console.log('link ', link));

All function variables are constant, except for the “customer” and “email” variables. I get the email from the session, but the “customer” should take the value from input. The problem is that the function that reads the value from the input requires the client component, but the function that generates the link does not work in the client component. How can I transfer a variable from a client component to a server component, or how can I place this function in a client component.

I searched the internet for how to declare a variable globally for the entire project, but it uses functions that the client component requires, and in my case it doesn’t work.