Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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;
Tags:

2

Answers


  1. 0

    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>
  );
}
    Login or Signup to reply.
  2. 0

    Use ternary operator to check if state value matches your desired value.

    {option === "yes" && (
            // Your component
          )}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search