Post
Ask Question

Dynamic Radio Button Component in Next.js

Introduction

Radio buttons are a common user interface element for allowing users to select a single option from a list. In Next.js, you can create a dynamic radio button component that generates radio buttons based on a set of options. In this article, we'll walk through the steps to create such a component.

Prerequisites

Before we begin, ensure you have the following prerequisites.

  1. Node.js and npm are installed on your machine.
  2. A basic understanding of Next.js and React.

Step 1. Set Up a Next.js Project

If you don't already have a Next.js project, you can create one using the following command.

npx create-next-app dynamic-radio-buttons
cd dynamic-radio-buttons

Step 2. Create the Dynamic Radio Button Component

Inside your Next.js project, create a new React component that will serve as your dynamic radio button component. You can place it in a suitable directory, such as /components.

// components/DynamicRadioButtons.js

import React, { useState } from 'react';

const DynamicRadioButtons = ({ options, onSelect }) => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleOptionChange = (event) => {
    const value = event.target.value;
    setSelectedOption(value);
    onSelect(value);
  };

  return (
    <div>
      <h3>Select an option:</h3>
      {options.map((option) => (
        <div key={option.value}>
          <input
            type="radio"
            id={option.value}
            name="dynamicRadio"
            value={option.value}
            checked={selectedOption === option.value}
            onChange={handleOptionChange}
          />
          <label htmlFor={option.value}>{option.label}</label>
        </div>
      ))}
    </div>
  );
};

export default DynamicRadioButtons;

In this component, we accept an array of options and an onSelect callback function as props. The component renders radio buttons based on the options provided, and when a radio button is selected, it calls the onSelect callback with the selected value.

Step 3. Use the Dynamic Radio Button Component

Now, you can use the DynamicRadioButtons component in your Next.js pages or components. For example, let's create a simple Next.js page that uses the component.

// pages/index.js

import React, { useState } from 'react';
import DynamicRadioButtons from '../components/DynamicRadioButtons';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
];

const Home = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleOptionSelect = (value) => {
    setSelectedOption(value);
  };

  return (
    <div>
      <h1>Dynamic Radio Buttons Example</h1>
      <DynamicRadioButtons options={options} onSelect={handleOptionSelect} />
      <p>Selected option: {selectedOption}</p>
    </div>
  );
};

export default Home;

In this example, we import the DynamicRadioButtons component, define an array of options, and handle the selected option using the local state.

Summary

Creating a dynamic radio button component in Next.js allows you to easily generate radio buttons based on a set of options. This can be especially useful when building forms or interactive interfaces in your Next.js application. By following the steps outlined in this article, you can create and integrate this component seamlessly into your projects.


Similar Articles