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'));

What have you tried? Stack Overflow is not a code writing service. We're here to help you with issues that you've tried to solve yourself. Have you watched any tutorials or read any documentation on conditional rendering in React? That would be a good place to start. — JMadelaine, Mar 30 '20 at 11:25
i have tried with button onClick change hide and show but i am really dont getting any idea to do with dropdown... — Raushan Singh, Mar 30 '20 at 11:38
@JMadelaine can u please suggest me any link so i can help myself.. if possible — Raushan Singh, Mar 30 '20 at 11:42
You have not even explained the question properly, anyways, use `this.state.value` to conditionally render your input, Initialize `this.state.value = ''` such that when it is defined you show the input, otherwise not — Somangshu Goswami, Mar 30 '20 at 13:37

score 0 · Accepted Answer · answered Mar 31 '20 at 04:29

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.

conditional input box rendering

1 Answers1