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

What is the process for transmitting information from a page to layout components using the NextJS 13 app router?

Prevent a HTML button from being clicked multiple times before it disappears (using Django)

What is the best way to input information into my Google spreadsheet with React JS?

Rotation of the SVG coordinate system distorts angles

Desktop media queries are functioning properly, yet experiencing issues on mobile devices

Passing a ref from a parent component to a child component in reactjs

React is throwing an error message stating that setCount is not a valid function

Font formatting functions correctly on local host, but fails to load on live server

Eliminate perfect-scrollbar functionality on mobile devices

What is the purpose of the 'offset' property in React Native's PanResponder?

HTML5 header video with a subtle color palette

Exploring Next.js: The difference between Client Side Navigation and direct html modifications

Trouble with ASP.NET Master Page CSS Rendering Incorrectly

Error: The selector "html" is not considered pure as it does not contain any local class or id. Pure selectors must include at least one local class or id

Error in Node: resolve-url-loader - CSS resolution error

Initiate the React project by executing the command to start React Native development

Error: The function props.addToCart is not accessible

Checking for an exact value using the includes() method in JavaScript - a comprehensive guide

Dynamic JavaScript tool

Autofocus on the first MenuItem with the same value in ReactJS MUI