Display input box if selecting a specific radio button

Goal:
If you select green in the radio. a input box text will appear below the radio input group. If you click another radio button, it will not displayed.

If you select blue in the radio. a input box text will appear below the radio input group. If you click another radio button, it will not displayed.

Problem:
I do not how to solve it. How would you solve it?

Info:
*Newbie in reactjs

Stackblitz:
https://stackblitz.com/edit/react-rpncls?

Thank you!


import React from 'react';
import './style.css';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      color: 'red'
    };

    this.onRadioChange = this.onRadioChange.bind(this);
  }

  onRadioChange = e => {
    this.setState({
      color: e.target.value
    });
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmit}>
          <strong>Select Color:</strong>

          <ul>
            <li>
              <label>
                <input
                  type="radio"
                  value="red"
                  checked={this.state.color === 'red'}
                  onChange={this.onRadioChange}
                />
                <span>Red</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="green"
                  checked={this.state.color === 'green'}
                  onChange={this.onRadioChange}
                />
                <span>Green</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="blue"
                  checked={this.state.color === 'blue'}
                  onChange={this.onRadioChange}
                />
                <span>Blue</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="orange"
                  checked={this.state.color === 'orange'}
                  onChange={this.onRadioChange}
                />
                <span>Ornage</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="purple"
                  checked={this.state.color === 'purple'}
                  onChange={this.onRadioChange}
                />
                <span>Purple</span>
              </label>
            </li>
          </ul>

          <button type="submit">Choose Color</button>
        </form>
      </div>
    );
  }
}

Answer

You can conditionally render the text box depending on the color selected.

App.js:

import React from 'react';
import './style.css';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      color: 'red'
    };

    this.onRadioChange = this.onRadioChange.bind(this);
  }

  onRadioChange = e => {
    this.setState({
      color: e.target.value
    });
  };

  textBoxVisible = () => {
    return (this.state.color==="green" || this.state.color==="blue");
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmit}>
          <strong>Select Color:</strong>

          <ul>
            <li>
              <label>
                <input
                  type="radio"
                  value="red"
                  checked={this.state.color === 'red'}
                  onChange={this.onRadioChange}
                />
                <span>Red</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="green"
                  checked={this.state.color === 'green'}
                  onChange={this.onRadioChange}
                />
                <span>Green</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="blue"
                  checked={this.state.color === 'blue'}
                  onChange={this.onRadioChange}
                />
                <span>Blue</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="orange"
                  checked={this.state.color === 'orange'}
                  onChange={this.onRadioChange}
                />
                <span>Ornage</span>
              </label>
            </li>

            <li>
              <label>
                <input
                  type="radio"
                  value="purple"
                  checked={this.state.color === 'purple'}
                  onChange={this.onRadioChange}
                />
                <span>Purple</span>
              </label>
            </li>
          </ul>
          {this.textBoxVisible() && <input type="text"/>}
          <button type="submit" class="submitButton">Choose Color</button>
        </form>
      </div>
    );
  }
}

To make sure the text box and the submit button aren’t on the same line, add this to style.css:

.submitButton{
  display:block;
}