conditional input box rendering

Question

i am new in react js. i have one drop down in react js and there is two options 1. Company 2. Individual`

      <select value={this.state.value}>
        <option value="company">Company</option>
        <option value="individual">individual</option>
      </select>

if i select company than show

<input type="text" name="company" />

if i select individual than show

<input type="text" name="individual" />

through state management in react js.

here is the code which i have tried with button onClick to hide and show

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({
      color:"blue", 
      brand:"audi" , 
      model:"a8" , 
      year:2000
    });
  }

  state = {
    isActive: false
  }

  handleShow = () => {
    this.setState({
      isActive: true
    })
  }

  handleHide = () => {
    this.setState({
      isActive: false
    })
  }

  render() {
    const message = 'You selected ' + this.state.selectedValue;
    return (
      <div>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
        <table border="1" width="100%">
          <tr>
            <td><h1>{this.state.brand}</h1></td>
            <td><h1>{this.state.color}</h1></td>
            <td><h1>{this.state.model}</h1></td>
            <td><h1>{this.state.year}</h1></td>
          </tr>
        </table>

        <button
          type="button"
          onClick={this.changeColor}
        >Change details</button>
       <hr></hr>
        {this.state.isActive && <h1>i am changing state</h1>}
        <button onClick={this.handleShow}>Show</button>
        <button onClick={this.handleHide}>Hide</button>
        <hr></hr>

      </div>

    );
  }
}

ReactDOM.render(<Car />, document.getElementById('root'));

Answer 1

You need to control state when the <select/> value changes with the onChange event.

I made a code sandbox with a working implementation for you.

When the value of the <select/> node changes, state is set to the new value and re renders the component. If the value is company than show one input, if the value is individual then show the other input.