Mastering Radio Buttons in React: Creating Interactive Components with Parent-Child Communication

2023-09-03

In my previous blog post, I mentioned and showed an example of a child and parent component while explaining this.props. Click here to read it. Today, let's dive more into the topic of child and parent component!

So, what is a child component?

A child component is a component that is nested within another component, often referred to as its parent component. Child components can receive data (props) and behavior from their parent components and use that information to render their own output.

Example of a child component:

import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>This is a child component.</p>
      </div>
    );
  }
}

export default ChildComponent;

Now, what is a parent component?

A parent component is a higher-level component that may contain one or more child components. Parent components can pass data (props) and functions (callbacks) to their child components, which allows for dynamic rendering and interactivity.

Example of a parent component:

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <p>This is a parent component.</p>
        <ChildComponent />
      </div>
    );
  }
}

export default ParentComponent;

In this example, ParentComponent is the parent and ChildComponent is the child. The ParentComponent renders the ChildComponent within its own rendering, making ChildComponent a child of ParentComponent. The parent can pass props to the child to control its behavior and appearance.

Radio buttons to illustrate the child and parent relationship:

Now, I'll be showing you another example where we will be creating a radio button component with a single radio button and a group of radio buttons. We'll create both child and parent components to illustrate the relationship.

Child Component - RadioButton

import React from 'react';

class RadioButton extends React.Component {
  render() {
    const { label, checked, onChange } = this.props;

    return (
      <label>
        <input type="radio" checked={checked} onChange={onChange} />
        {label}
      </label>
    );
  }
}

export default RadioButton;

In this child component, we have a radio button that receives its label, checked status, and onChange function via props.

Parent Component - RadioButtonGroup

import React from 'react';
import RadioButton from './RadioButton';

class RadioButtonGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: null
    };
  }

  handleOptionChange = (option) => {
    this.setState({
      selectedOption: option
    });
  };

  render() {
    const options = ['Option 1', 'Option 2', 'Option 3'];

    return (
      <div>
        <h3>Select an option:</h3>
        {options.map((option, index) => (
          <RadioButton
            key={index}
            label={option}
            checked={this.state.selectedOption === option}
            onChange={() => this.handleOptionChange(option)}
          />
        ))}
      </div>
    );
  }
}

export default RadioButtonGroup;

In this parent component, RadioButtonGroup, we define a group of radio buttons. We maintain the selected option in the component's state and pass the selected option and a function to update it as props to each RadioButton child component.

Now, to use these components:

import React from 'react';
import RadioButtonGroup from './RadioButtonGroup';

class App extends React.Component {
  render() {
    return (
      <div>
        <RadioButtonGroup />
      </div>
    );
  }
}

export default App;

In this example, App is the parent component that renders the RadioButtonGroup component. The RadioButtonGroup component, in turn, renders individual RadioButton components as children, passing the necessary props for each radio button.

Conclusion:

In conclusion, this example, we explored the crucial concepts of parent and child components in React through the implementation of a radio button group. The RadioButton component served as the child, encapsulating the logic and display of an individual radio button, while the RadioButtonGroup component acted as the parent, managing the state and rendering a group of radio buttons.

The child component, RadioButton, received properties (props) from the parent, such as the label, checked state, and a callback function to handle changes. By passing down props, the parent component maintained control over the child's behavior and appearance, fostering a clear and organized flow of data within the application.

Understanding the parent-child relationship and utilizing this.props is fundamental to building robust and interactive applications in React. Through thoughtful design and effective prop passing, developers can create modular, reusable components that enhance the overall maintainability and scalability of their projects. As you continue your React journey, mastering these concepts will undoubtedly empower you to create more efficient and elegant applications.

---

Also on codewithkatyrosli.com

Understanding this.state in React: A Comprehensive Guide, 2023-09-23

In the world of React, understanding how to manage and utilize component state is fundamental to building dynamic and interactive applications. 'this.state' is a crucial concept that enables React components to hold and manage their internal data. In this guide, we will delve into what this.state is, when to use it, how to use it, top key learnings, and a conclusive summary of its significance in React development.

Read More