я понял.! Работает. Спасибо

Да и вообще, зачем тебе там объект? Что мешает сделать const [logoType, setLogoType] = useState('')?

А зчем, если во втором объекте так уже и есть?)

Приветствую всех! У кого есть минут 10 на обсуждение сложного вопроса (ИМХО)? )

нужно обновить стейт и потом стейт будет менятся

setState (state => {...this.state, ...data})

Просто напиши вопрос в чат

написал хук, для создания лоадеров (индикаторов процесса какого-либа запроса и прочее)

нормально ли так и есть ли тут какие-то подводные камни, на которые я ненароком наткнулся?

import { useState } from 'react';

type Loaders<T extends Record<string, boolean>> = {
  loaded: <LoaderField extends keyof T>(loader: LoaderField) => boolean;
  setLoader: <LoaderField extends keyof T>(
    loader: LoaderField,
    value: boolean
  ) => void;
};

export const useLoaders = <T extends Record<string, boolean>>(
  loadersObj: T
): Loaders<T> => {
  const [loaders, setLoaders] = useState(loadersObj);

  const setLoader = <LoaderField extends keyof T>(
    loader: LoaderField,
    value: boolean
  ): void => {
    setLoaders({
      ...loaders,
      [loader]: value,
    });
  };

  const loaded = <LoaderField extends keyof T>(
    loader: LoaderField
  ): boolean => {
    return loaders[loader];
  };

  return {
    setLoader,
    loaded,
  };
};

использование:

  const { loaded, setLoader } = useLoaders({
    phone: false,
    email: false,
    sendSMS: false,
  });

setLoader('phone', true);

Привет ребят
React, у меня есть Collapse компонент, который показывает или скрывает все children
Внутри компонента, который есть children я делаю useRef()
И когда я скрываю табу, а потом опять открываю, ref.current.getClientRect() - возвращает везде 0
Есть у кого идеи как пофиксить?

Просто проверял на наличие людей и отсутствие троллей.

Есть структура (дерево элементов). У каждого элемента есть id, свой рендер (func component), а также правила, которые влияют на структуру(динамическая форма). Тобишь пользователь кликает по определенному графу/ветке - выводятся поля(группа инпутов, либо одиночный инпут), которые есть в этом графе, но при заполнении занчений нижние поля могут показываться или скрываться.

Вопрос. Делать HOC, который при выборе ветки пробегается по полям, собирает все правила и рефы полей, а затем при каждом изменении проверять изменённое состояние и менять структуру (скрывать или проявлять реф)?

Привет
Подозреваю что т.к. компонент Collapse возвращает null когда он свернут то ты используешь ссылку на элемент который уже размонтирован
Причина может быть в замыкании например, лучше скинь код в котором ты хочешь получить размеры элемента

а почему вообще ты так делаешь? У тебя, получается, одна кнопка, которая должна коллапсить ВСЕ списки или один список элементов? Почему тогда не добавлять className при клике на Коллапс элемент?

Добрый день
Изучаю связку react и typescript/
В проекте несколько страниц и для роутинга использую react-router-dom. (Ставил через yarn add react-router-dom )
Далее в index.tsx добавляю

import { BrowserRouter as Router } from "react-router-dom"

И получаю ошибку вида:

Could not find a declaration file for module 'react-router-dom'. '..../node_modules/react-router-dom/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-router-dom` 

Как и просят устанавливаю

npm install @types/react-router-dom

,  этой ошибки нету, но получаю ошибку

Не удалось найти файл объявления модуля "react"

Как пофиксить?

import { BrowserRouter as Router } from "react-router-dom"

Could not find a declaration file for module 'react-router-dom'. '..../node_modules/react-router-dom/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-router-dom` 

npm install @types/react-router-dom

Не удалось найти файл объявления модуля "react"

Покажите весь файл

Как бы все стандартно:

import React from 'react';
import ReactDOM from 'react-dom';

import { BrowserRouter as Router } from "react-router-dom"
import {createBrowserHistory} from 'history'

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const history = createBrowserHistory()

ReactDOM.render(
  <React.StrictMode>
    <Router history={history}>
      <App />
    </Router>      
  </React.StrictMode>,
  document.getElementById('root')
);

Стало ругаться на:

import React from 'react';
import ReactDOM from 'react-dom';

Привет, подскажите пожалуйста как в функциональной компоненте оттрекать предыдущий роут (мне надо делать действие если чел перешел на страницу с определенной страницы)

import React from 'react';
import ReactDOM from 'react-dom';

import { BrowserRouter as Router } from "react-router-dom"
import {createBrowserHistory} from 'history'

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const history = createBrowserHistory()

ReactDOM.render(
  <React.StrictMode>
    <Router history={history}>
      <App />
    </Router>      
  </React.StrictMode>,
  document.getElementById('root')
);

а @types/react есть?