Designing Input Forms

Hello! Welcome back.

In our last lesson, we connected our dApp to the blockchain to read data, successfully fetching and displaying a user's native SOL and SPL token balances. This was a huge step in making our application dynamic and user-aware.

Today, we shift our focus from reading to writing. Before we can send a transaction to change the state of the blockchain, we first need to gather the necessary information from the user. This lesson is dedicated to exactly that: building a UI form to gather user input for a program instruction. Your extensive experience with React and frontend development will be a great asset here, as we'll be applying familiar patterns to the unique context of Web3.

The Foundation: Controlled Components for Program Instructions

In React, the standard way to handle form data is through controlled components. As you know, this means the component's state is the "single source of truth" for the input elements. We'll use this exact pattern to collect the parameters required by our Solana program's instructions.

Imagine a simple program instruction in Anchor that looks like this:

pub fn update_message(ctx: Context<Update>, new_message: String) -> ProgramResult { ... }

This instruction requires one argument: new_message of type String. Our goal on the frontend is to create a form with a text input where the user can type this message. The value from this input will then be passed directly into our transaction call.

Let's see this in action. The following article provides a clear, full-stack example. We'll focus on the React client code.

As you can see from the article, the process is straightforward and should feel very familiar:

1. State: A useState hook (const [input, setInput] = useState('')) holds the value of the form input.
2. UI: An <input> element's value is bound to the input state, and its onChange handler calls setInput to update the state on every keystroke.
3. Submission: A <button>'s onClick handler calls an update function.
4. Integration: Inside the update function, the input state variable is passed directly as an argument to the Anchor program.rpc.update() method.

This directly connects the user's input in the browser to the data field of a Solana instruction.

Handling Forms with Multiple Inputs

Most program instructions are more complex and require multiple arguments. For example:

pub fn create_listing(ctx: Context<Create>, item_name: String, price: u64) -> ProgramResult { ... }

While you could use a separate useState for each field (itemName, price), this can become cumbersome. A more scalable and elegant pattern, common in advanced React development, is to use a single state object and a generic handleChange function.

This video provides an excellent, concise tutorial on this exact pattern. It's not Web3-specific, which highlights that you are applying a best-practice React pattern to a new domain.

By adopting this pattern, your form state object can be structured to mirror the arguments of your program instruction.

const [formData, setFormData] = useState({
  itemName: '',
  price: 0,
});

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData(prevData => ({
    ...prevData,
    [name]: value,
  }));
};

// And in your JSX:
// <input name="itemName" value={formData.itemName} onChange={handleChange} />
// <input type="number" name="price" value={formData.price} onChange={handleChange} />

When you call your program, you can then destructure the state object:

await program.rpc.createListing(formData.itemName, formData.price, { ... });

A Practical Example in a Next.js App

Let's look at another practical implementation. This article uses Next.js and demonstrates a clean separation of concerns, where the UI component gathers the data and passes it to a dedicated function for processing.

This approach, where the component's responsibility is primarily to manage its UI state and then delegate the complex web3 logic to another function, is excellent for maintainability and testing, especially as your dApp grows.

Finally, let's watch one more example that puts all the pieces together in a live demonstration.

const [profileData, setProfileData] = useState({
  username: '',
  age: 0,
});

const handleChange = (e) => {
  const { name, value, type } = e.target;
  
  // Parse the value as a number if the input type is 'number'
  const processedValue = type === 'number' ? parseInt(value, 10) : value;

  setProfileData(prevData => ({
    ...prevData,
    [name]: processedValue,
  }));
};

// Your JSX would look like this:
// <input name="username" type="text" value={profileData.username} onChange={handleChange} />
// <input name="age" type="number" value={profileData.age} onChange={handleChange} />

Conclusion

In this lesson, you've learned how to apply your existing frontend expertise to build the essential user interface for interacting with Solana programs.

Key Takeaways:

• Controlled Components are Key: Standard React form patterns are the foundation for gathering user input for Solana instructions.
• State Management Strategy: For simple forms, a single useState hook is sufficient. For more complex forms with multiple inputs, using a single state object and a generic handleChange function is a more scalable and maintainable pattern.
• Connecting UI to Logic: The data collected in your form's state is passed directly as arguments to the Anchor program.rpc.instructionName() function.
• Separation of Concerns: For cleaner code, you can keep transaction logic in separate functions that are called from your component's event handlers (like onClick), passing the form state as parameters.

Preview of the Next Lesson:

We've now built the form to gather user input. The next logical step is to take that input and use it to execute a transaction on the blockchain. In our next lesson, "Construct and submit a program transaction based on user input from the UI," we will do just that. We'll take the form state, build a transaction object, have the user sign it with their wallet, and submit it to the Solana network.