React Js Show Hide Div Based on Dropdown Selection

    const { useState } = React;

​

    const App = () => {

      const [selectedCountry, setSelectedCountry] = useState(''); // State to track the selected country

​

      // Event handler to update the selectedCountry state when dropdown selection changes

      const handleDropdownChange = (event) => {

        const selectedValue = event.target.value;

        setSelectedCountry(selectedValue);

      };

​

      return (

        <div className='container'>

          <h3>React js show hide div based on dropdown selection</h3>

          <select onChange={handleDropdownChange}>

            <option value="">Select a country</option>

            <option value="United States">United States</option>

            <option value="Canada">Canada</option>

            <option value="United Kingdom">United Kingdom</option>

            {/* Add more countries as needed */}

          </select>

​

          {/* Div to display country information */}

          {selectedCountry === 'United States' && (

            <div>

              <h3>United States</h3>

              <p>

                The United States of America is a country primarily located in North America.

              </p>

            </div>

          )}

​

          {selectedCountry === 'Canada' && (

            <div>

              <h3>Canada</h3>

              <p>

                Canada is a country in the northern part of North America.

              </p>

            </div>

          )}

​

          {selectedCountry === 'United Kingdom' && (

            <div>

              <h3>United Kingdom</h3>

              <p>

                The United Kingdom of Great Britain and Northern Ireland, commonly known as the United Kingdom (UK).

              </p>

            </div>

          )}

​

          {/* Add more div blocks for other countries as needed */}

        </div>

      );

​

    }

​

    ReactDOM.render(<App />, document.getElementById('app'));

  </script>

    const { useState } = React;

​

    const countryData = [

      {

        name: 'Australia',

        description: 'Australia is a country and continent surrounded by the Indian and Pacific oceans.',

      },

      // Add more countries and descriptions as needed

    ];

    const App = () => {

      const [selectedCountry, setSelectedCountry] = useState(''); // State to track the selected country

​

      // Event handler to update the selectedCountry state when dropdown selection changes

      const handleDropdownChange = (event) => {

        const selectedValue = event.target.value;

        setSelectedCountry(selectedValue);

      };

​

      // Find the selected country object from the data

      const selectedCountryData = countryData.find((country) => country.name === selectedCountry);

​

      return (

        <div className='container'>

          <h3>React Js Show Hide Div Based on Dropdown Selection using Map Method</h3>

          {/* Dropdown */}

          <select onChange={handleDropdownChange}>

            <option value="">Select a country</option>

            {countryData.map((country) => (

              <option key={country.name} value={country.name}>

                {country.name}

              </option>

            ))}

          </select>

​

          {/* Div to display country information */}

          {selectedCountryData && (

            <div>

              <h3>{selectedCountryData.name}</h3>

              <p>{selectedCountryData.description}</p>

            </div>

          )}

        </div>

      );

​

    }

​

    ReactDOM.render(<App />, document.getElementById('app'));

  </script>