How to use radio buttons in ReactJS

Until now we only had two privacy options for coding sessions in GitDuck. You could either record publicly or privately. As we launched the Teams for GitDuck, developers now can create teams and do private live coding with their team members. So we had to make a change in the video visibility options to add Team as an option. You can watch the frontend design here.

To do that, we are going to use radio buttons with React. They are not as straightforward as HTML, but no big deal. We followed the instructions from http://react.tips/radio-buttons-in-react-16/ and now people can select from:

• Team (Only team can watch)
• Public (Anyone)
• Private (Only you)

      <form>
        <div className="custom-control custom-radio">
          <label>
            <input type="radio" value="option1"/>
            <span className="ml-1">Team (only your team can watch)</span>
          </label>
        </div>
        <div className="custom-control custom-radio">
            <label>
              <input type="radio" value="option2"/>
              <span className="ml-1">Public (anyone)</span>
            </label>    
        </div>
        <div className="custom-control custom-radio">
          <label>
            <input type="radio" value="option3"/>
            <span className="ml-1">Private (only you)</span>
          </label>
        </div>
      </form>