Forem: muflih1

Why does the textarea rows count not decrease when content is removed?

muflih1 — Fri, 10 May 2024 10:52:17 +0000

When I don't set the rows to state or textAreaRef.current.rows = calculatedRows, the console log properly increases and decreases the calculatedRows. However, as soon as I set the calculatedRows to the state or textAreaRef.current.rows = calculatedRows, it increases the rows but does not decrease them; it stays at the last calculatedRows.

import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const TextArea = styled.textarea`
  padding: 2px;
  resize: none;
  overflow-y: hidden;
  line-height: 1.5;
`;

function App() {
  const [val, setVal] = useState("");
  const textAreaRef = useRef(null);
  const [rows, setRows] = useState(1);

  const resizeTextArea = () => {
    const lineHeight = parseInt(
      window.getComputedStyle(textAreaRef.current).lineHeight
    );
    const calculatedRows = Math.floor(
      textAreaRef.current.scrollHeight / lineHeight
    );
    console.log(calculatedRows);
    setRows(calculatedRows);
  };

  useEffect(() => {
    resizeTextArea();
  }, [val]);

  const onChange = (e) => {
    setVal(e.target.value);
  };

  return (
    <div>
      <TextArea ref={textAreaRef} value={val} onChange={onChange} rows={rows} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I expected the number of rows in the textarea to decrease when content is removed, but it only increases. I've tried using setRows(calculatedRows) and textAreaRef.current.rows = calculatedRows to update the number of rows but encountered the same issue.

Proper Method for Storing User Data on the Client Side in React for Authentication

muflih1 — Fri, 18 Aug 2023 05:50:34 +0000

I'm developing a React application and need to securely store logged-in user information on the client side for authentication purposes. I'm currently exploring options such as localStorage, sessionStorage, and state management libraries like Redux. My concern is to ensure data privacy and security while maintaining efficient performance. I'm seeking guidance on the recommended approach to handle this situation effectively within the React ecosystem. Are there any industry best practices or established patterns for managing user data on the client side? Thank you for your insights and advice!

how i can build a rest api using python without using any framework

muflih1 — Mon, 13 Jun 2022 04:26:43 +0000