reactjsconditional-rendering

How do I activate a hidden div via a select form that is useState?


Please understand I am just learning....

can someone help modify the code so that when the ‘yes’ option is selected, a hidden part of the form is shown to allow additional completion?

I tried to do this using usestate as in hamburger but it didn't work. I have no idea anymore, hence my question....

This is a snippet of a larger form that is all based on usestate

import React, { useState } from 'react';

function S() {


    const options = [
        { label: "no", value: "no" },
        { label: "yes", value: "yes" }
    ]

    const [option, setOption] = useState();

    const handleOptionChange = (e) => {
        setOption(e.target.value);
    };

    return (
        <div className="App">
            < div className='container text-center'>
                <h3>Creator device</h3>
                <form>

                    <div className="row mb-3">
                        <label className="col-sm-2 col-form-label" id='finish'>
                            <h5>other device?</h5>
                        </label>
                        <div class="col-sm-10">
                            <select class="form-select" onChange={handleOptionChange}>
                                {options.map((option) => (
                                    <option value={option.value}>{option.label}</option>
                                ))}
                            </select>
                        </div>
                    </div>

                    <div className="row mb-3">
                        <label className="col-sm-2 col-form-label" id='show'>
                            <h5> show other device</h5>
                        </label>
                        <div class="col-sm-10">
                            <input type="group" className="form-control" id="inputMB_sn" />
                        </div>
                    </div>

                </form>
            </div>
        </div>
    );
}

export default S;


Solution

  • You can use conditional rendering inside returned jsx using the ternary operator. Show the field when option variable value is "yes", null otherwise.

    import React, { useState } from 'react';
    
    function S() {
      const options = [
        { label: "no", value: "no" },
        { label: "yes", value: "yes" },
      ];
    
      const [option, setOption] = useState();
    
      const handleOptionChange = (e) => {
        setOption(e.target.value);
      };
    
      return (
        <div className="App">
          <div className="container text-center">
            <h3>Creator device</h3>
            <form>
              <div className="row mb-3">
                <label className="col-sm-2 col-form-label" id="finish">
                  <h5>other device?</h5>
                </label>
                <div class="col-sm-10">
                  <select class="form-select" onChange={handleOptionChange}>
                    {options.map((option) => (
                      <option value={option.value}>{option.label}</option>
                    ))}
                  </select>
                </div>
              </div>
    
              {option === "yes" ? (
                <div className="row mb-3">
                  <label className="col-sm-2 col-form-label" id="show">
                    <h5> show other device</h5>
                  </label>
                  <div class="col-sm-10">
                    <input type="group" className="form-control" id="inputMB_sn" />
                  </div>
                </div>
              ) : null}
            </form>
          </div>
        </div>
      );
    }