The input field is failing to show up on the screen

Question

The input field is failing to show up on the screen

I have been working on my React app and experimenting with how to dynamically display input elements based on different screen sizes. To achieve this, I implemented the use of window.innerWidth as shown in the code snippet below:

<div className='Trends'>
        <div>
          <h4 className='trend-head'>TRENDING ITEMS</h4>
        </div>

        {window.innerWidth < 991 ? ( 
            <div className='input-arrow'>
            <input type="text" placeholder={selectCategory || 'All'} className='trend-input' />
            <BiSolidDownArrow className='dr-arrow' onClick={() => setShowArray(!showArray)} />
            
          </div>
          
        ) : (
          <div className='Array-div'>
            <ul>
              {storedArray}
            </ul>
          </div>
          
          
        )}
      </div>
   
  );

Despite implementing this logic, it seems that the input div is not being displayed correctly. Upon inspecting my browser's console, I noticed that the input div is missing when compared to other div elements on the page.

css reactjs input jsx conditional-rendering

Answer 1

Answer №1

The problem arises from the fact that the code only executes once when the component is initially mounted. At that point, window.innerWidth is 0, causing the input to never appear. To address this issue, it is recommended to utilize the useState hook for managing state changes and triggering re-renders accordingly. Additionally, leverage the useEffect hook to set up an eventListener, which will monitor window resize events and toggle states accordingly.

import { useState, useEffect } from "react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

function App() {
    const [smallWindow, setSmallWindow] = useState(false);

  useEffect(() => {
    if (window.innerWidth < 400) {
      setSmallWindow(true);
    } else {
      setSmallWindow(false);
    }
    const resizer = () => {
      if (window.innerWidth < 400) {
        setSmallWindow(true);
      } else {
        setSmallWindow(false);
      }
    };
    window.addEventListener("resize", resizer);
    return () => {
      window.removeEventListener("resize", resizer);
    };
  }, []);

  return (
    <div className="App">
      <p>Resize this window to see the text change below</p>
      {smallWindow ? <h1>small screen</h1> : <h1>BIG SCREEN</h1>}
    </div>
  );
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<body>
    <div id="root"></div>
</body>

Answer 2

The problem arises from the fact that the code only executes once when the component is initially mounted. At that point, window.innerWidth is 0, causing the input to never appear. To address this issue, it is recommended to utilize the useState hook for managing state changes and triggering re-renders accordingly. Additionally, leverage the useEffect hook to set up an eventListener, which will monitor window resize events and toggle states accordingly.

import { useState, useEffect } from "react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

function App() {
    const [smallWindow, setSmallWindow] = useState(false);

  useEffect(() => {
    if (window.innerWidth < 400) {
      setSmallWindow(true);
    } else {
      setSmallWindow(false);
    }
    const resizer = () => {
      if (window.innerWidth < 400) {
        setSmallWindow(true);
      } else {
        setSmallWindow(false);
      }
    };
    window.addEventListener("resize", resizer);
    return () => {
      window.removeEventListener("resize", resizer);
    };
  }, []);

  return (
    <div className="App">
      <p>Resize this window to see the text change below</p>
      {smallWindow ? <h1>small screen</h1> : <h1>BIG SCREEN</h1>}
    </div>
  );
}

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<body>
    <div id="root"></div>
</body>

The input field is failing to show up on the screen

Answer №1

Similar questions

Despite implementing componentDidMount, the setState function is failing to update an initialized array state property

Execute a jQuery function every time the class of the parent container div changes

Why isn't the show/hide feature in Jquery functioning properly?

Highlight and trim lengthy text using React

Encountering a circular structure while attempting to convert to JSON -- starting at an object created by the 'HTMLInputElement' constructor

Adjust the button's color even after it has been clicked

using outlines for FontAwesome icons in React Native

Tips for showcasing images retrieved from a REST API on the frontend, with the condition that only one image should be displayed using multer

What steps can I take to make Accounts.onLogin have an effect on my Meteor React ES6 application?

Is Swiper carousel navigation secretly operating without being seen?

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

The delete button in the "Chip" component of React Material-UI is not functioning as expected

Issues with array visualization when rendering within a table using the map function, despite successful logging in

Transfer or duplicate an SVG image from the bottom div to the top div

Encountered an error while attempting to install the @typescript-eslint/eslint-plugin

The Material-UI datepicker seems to be malfunctioning

The QR code disappears from the screen once the button is no longer pressed

The width property is not being passed down to the table

Sharing data from a Provider to a function in React can be done through various methods

Customize the text color across all sections of the application in ExtJS 6