show and hide fields according to dropdown list in ReactJS

user_16707573 0
Viewed 1188

I had achieved it, but I deleted the code by mistake... with the following example it would help me to show 2 states.

import React, { useState } from 'react';

export default () => {
  const [show, setShow] = useState(true);

  return (
    <>
      <button
        type="button"
        onClick={() => {
          setShow(!show);
        }}
      >
        Mostrar {show ? 'Div 2' : 'Div 1'}
      </button>

      {show ? (
        <div style={{ color: 'red' }}>Div 1</div>
      ) : (
        <div style={{ color: 'blue' }}>Div 2</div>
      )}
    </>
  );
};

But I have a dropdown list with four options, and depending on which one I select, it will show different fields on the form.

import "./styles.css";
import React, {useState} from "react";

export default function App() {
  
const [animal, setAnimal] = useState(null);

  

  return (
    <div className="App">
      <>
      <div>
      <label htmlFor="tipoId" className="col-md-6">
      Select Animal
      </label>
      <select onClick={() => setAnimal(!animal)}>
        <option value="0" selected hidden>Horse</option>
        <option value="1" selected>Tiger</option>
        <option value="2">Lion</option>
        <option value="3">Panther</option>
      </select>
      </div>
      
     {
      animal === "1" ? 
         <> <div> TIGER</div> </> 
      : animal === "2" ? (
        <> <div>LION</div> </>
      ): (
        <> <div>PANTHER</div> </>
      )
    }
 </>
</div>

); }

As you can see, the current code does not work, since it will only allow to have 2 states, show by default the panther ones and if another option is selected it will only show the tiger one, but the lion fields are never shown. Previously I had even been able to include in the drop-down list to be able to choose 6 options and that when choosing these they would show fields for this respective option.

I need to get to that point again :(

reactjs
1 Answers

Here you can use switch case instead of if or ternary operator because you have multiple conditions to check.
See below code I have added a separate function getAnimalDiv which will be responsible for returning div depending on the selected option.
and when you set state animal instead of using !animal set it to event.target.value so that you will actually get selected value in the state.
and if you do !animal it will set only true and false which is not useful in this scenario.

import "./styles.css";
import React, { useState } from "react";

export default function App() {

    const [animal, setAnimal] = useState(null);

    function getAnimalDiv(){
        switch(animal){
            case "0":
                return <div>TIGER</div>;
            case "1":
                return <div>LION</div>;
            case "2":
                return <div>PANTHER</div>;
            case "3":
                return <div>Other option</div>;
            default:
                return null;
        }
    }
    return (
        <div className="App">
            <>
                <div>
                    <label htmlFor="tipoId" className="col-md-6">
                        Select Animal
                    </label>
                    <select 
                    onClick={(event) => {
                        // here set target value to state which is 0, 1, 2, 3
                        setAnimal(event.target.value);
                    }}>
                        <option value="0" selected hidden>Horse</option>
                        <option value="1" selected>Tiger</option>
                        <option value="2">Lion</option>
                        <option value="3">Panther</option>
                    </select>
                </div>
                {getAnimalDiv()}
            </>
        </div>
    )
}
user_125414130
Related