By explicitly specifying which radio button is selected, we're also implicitly specifying which should be unselected. In our application we have 3 radio buttons where each of them has 2 states: selected and unselected. Naturally all other radio buttons should be unselected. This tells our Application component which radio button should be selected. In our state object we have selectedOption property with the initial value of option1. Let's make our Application component stateful:

It's clear that our component has 2 states to render: selected radio button and unselected radio button. We know that if React component can render different things, then it has to maintain state that tells it which thing to render. Now let's take a closer look at the first input element:Īpart from checked= then React will render: Figure 3. If you're not familiar with Bootstrap - don't worry, just focus on element: Their purpose is to create a layout using Bootstrap grid system. Whoa, that's alot of elements! Do we really need them? In render() function we'll write JSX code that creates element with 3 elements nested inside: Let's start with creating radio button elements. What should it render? From Figure 1 you can clearly see the following 2 user interface elements: Our component doesn't render anything, yet. We'll start by creating new React.js component called Application: You can find the full source code in this GitHub repository. Here is the application that we're going to build: Figure 1. Let me explain it to you with a help of a simple example. How do you use radio buttons in React.js? The good news is: Radio Buttons in React 16 is available! This tutorial covers React 15 and is now out of date.

Giant red button png