How to correctly write such a function in reactJS?

Question

React

People. I have already re-read all the manuals and reviewed the examples, but I just can’t figure out how to write this. I will be grateful if you multiply. We need to make a React.js component to select character parameters: planet, race and gender.
there are only three planets: "Earth", "Mars" and "Venus";
three races: humans, Martians and Venusians. Martians can only be from Mars, Venusians can only be from Venus, and humans can be from any of the three planets;
Humans have two sexes, Venusians have three (besides male and female there is a middle one), Martians have only one gender (male).

var Selector = React.createClass({
      render() {
        return (
            <div>
                <input type='checkbox' checked={this.props.humanChecked} ref='humanCheckedInput' onChange={this.handleChange}/>{' '}Люди
                <br/>
                <input type='checkbox' checked={this.props.marsiansChecked ref='marsCheckedInput' onChange={this.handleChange}/>{' '}Марсиане
                <br/>
                <input type='checkbox' checked={this.props.veneriansCheckes} ref='veneriansCheckedInput' onChange={this.handleChange}/>{' '}Венерианцы
            </div>
        );
      }
    });
    ReactDOM.render(
        <Selector gender="man" planet="mars" race="human"/> ,
        document.getElementById('container')
    );

It seems to me that it is not advisable to implement such a component with inputs. If there are any ideas or examples of such a component. Drop it please)

Answer 1

1. Please choose a race.
   All items appear in turn with the required items, depending on what was entered before, in a form that is convenient for you. I think in this case the code will be simple.