Форум программистов, компьютерный форум, киберфорум

Форум программистов и сисадминов Киберфорум


КиберФорум - форум программистов и системных администраторов. Бесплатная помощь в решении задач по программированию, математике, физике и другим наукам, решение проблем с компьютером, операционными системами.
Войти
Регистрация
Восстановить пароль

Темы раздела JavaScript: ReactJS

Как сделать каталог товаров?
Здравствуйте. У меня такой вопрос. Есть интернет-магазин, внутри него есть каталог товаров. В каталоге много категорий товаров. Необходимо сделать следующее: при выборе конкретной категории...

Не компилируется компонент
Здравствуйте. Я новичок в ReactJS, только изучаю его. Я написала небольшой компонент, но при компилации через webpack babel получаю ошибку и не понимаю, то неправильно я написала ? Подскажите,...

Секундомер
здравствуйте, подскажите как исправить отображение чисел при выводе. (должны выводится 00:00,00 а выводятся в столбик) (Основной код) mport React, {useState} from 'react'; import { Text, View,...

Почему context возвращает false?
Здравствуйте. Почему когда я пытаюсь вставить значение переменной из контекста в useState (например так: useState(context.name)) у меня контекст возвращает false. А когда я пытаюсь получить...

Отображение несколько видео на странице
Всем привет! Пытаюсь добавить несколько видео друг за другом на одну страницу import VideoPlayer from 'react-video-js-player' ... <div className="Test_Video"> <VideoPlayer ...

You appear to be using a native ES module configuration file, which is only supported when running Babel asynchronously
Полная ошбика "Parsing error: You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously". Эта ошибка почему то появляется и...

Как отправить динамическую форму в axios
Добрый день!!! Есть динамическая форма: <h1>Add Stage</h1> <form className={classes.root} onSubmit={handleSubmit}> {inputFields.map((inputField, index) => ( ...

Проблема с кликом вне модального окна
У меня есть два компонента Title и Post. По нажатию на ссылку в компоненте Title у меня должно открыться модальное окно и по хорошему должно закрыться если я нажму вне модального окна. И проблема...

Как добавить карту в React приложении?
Делаю интернет-магазин. Нужно на нескольких страницах создать карту с местонахождением магазина. То есть не просто картинку в виде скриншота, а чтобы с картой можно было взаимодействовать. Т.е....

Запускаю простенькую страницу ошибка 404
Сижу с ubuntu 22.04,, 3-й день пытаюсь сделать сайт до этого получилось написать простой фронт как задание. Прошло 2 недели и чтобы я не пытался запустить ошибка 404 не понимаю что делать. Исправил...

SignalR + ReactJS потеря состояния компонента
Здравствуйте. Разбираясь с реактом, решил написать небольшой чат. Он состоит из двух компонентов: RoomChat и RoomChatControls. RoomChat содержит в себе textarea для вывода сообщений и, собственно,...

Как ограничить количество цифр после запятой js?
Помогите пожалуйста ограничить количество цифр после запятой! <p className="Card-Click-dis">{item.price * item.count / 100 * 10} ₽</p> Идет такой подсчет, что цена умножается на количество и...

Группировка элементов диаграммы Ганта с одинаковым значением поля в одной строке
У меня кое-что не получается, уже давно ломаю голову.... Пожалуйста, взгляните на картинку, которую я прикрепил ниже: И у меня уже есть абсолютно все значения для отображения этой диаграммы,...

revalidate option in fetch doesn't work. the information on the webpage doesn't update
type Time = { datetime: string } async function getTime(): Promise<Time> { const res = await fetch('https://worldtimeapi.org/api/timezone/America/Chicago', { next: {revalidate: 3}}) ...

Почему не обновляется переменная
Мне нужно доделать проект, который был написан с помощью mobx. У меня почему-то не обновляется значение переменной (value={state.backOfficeTable1.description.currentMonth}) как в обычной useState,...

Регулярные выражения
Добрый день! Возникла проблема с input number и регулярным выражением. У меня инпут числовой, но в него проходят символы плюс и минус. Как от этого добра избавиться? при выводе в консоли значения -...

А вот как можно реализовать тамагочи на React, canvas (данные сайта хранятся в mongodb)?
Подкиньте пожалуйста идей,если можно. Делаю сайт,хочу добавить туда тамагочи. На данный момент есть двигающийся персонаж в канвасе на фоне,меняющимся в зависимости от погодных условий. Хочу добавить...

Заставить страницу обновиться после onClick event
Я хочу что бы после того как происхоидит event (юзер логинится или разлогинивается) кнопка менялась. Как только юзер вошел <button onClick={logOut}>Logout</button>, как только вышел <button...

Страница not-found не отображается в next.js 14
const NotFound = () => (<div style={{color:'skyblue'}}>n o t f o u n d</div>) export default NotFound в папке app,как и всё остальное. не работает почему? Добавлено через 3 часа 20 минут...

Как сделать поворот страниц pdf документа в React?
поступило такое задание

select изменить стрелку когда меню открыто
Добрый день. Чего-то совсем не могу нагулить. У select есть стрелка по умолчанию (с права) 1. её надо изменить на любую svg 2. когда меню открывается её нужно изменить на другой svg ...

Ошибка Objects are not valid as a React child
import React, { useState } from 'react'; function CitySearch(props) { const = useState(''); const = useState(); const handleChange = (event) => { ...

Перевод из градусов Цельсия в кельвины
Здравствуйте, возникает ошибка в подсчёте именно в {temp+273.15}. Прибавляет не к числу, а ставит перед числом цифру. С Фаренгейтом все работает.(В React). import React, {useState} from 'react';...

Оцените код
Как вам код import React, { useRef, useState } from 'react'; function EquationForm() { const = useState(null); const xRef = useRef(null); const yRef = useRef(null); const zRef =...

Делаю сайт, по видео с ютуба, нужна помощь
Здравствуйте, делаю сайт по видео с ютуба, немного изменил его под себя, делаю в целях изучения технологий. Сделал какую-то клиентскую и серверную часть, дошло до объединения их в единое целое. Но...

Авторизация для начинающих
Здравствуйте. Хотел бы авторизацию прикрутить для начала просто прочувствовать. Подскажите, пожалуйста, что взять. Вообще я думал по принципу, что при обращении по эндпоинту переадресация на сайт...

Сайт запускается из под корневой папки
Запускаю проект через npm start, на страницу выводится ошибка "Unexpected Application Error! 404 Not Found ������ Hey developer ������ You can provide a way better UX than this when your app...

Позиционирование кнопки по правому краю ReactJS + ChakraUI
День добрый! Что-то никак не могу выравнять элемент по правому краю. Использую React в связке с Chakra-UI. Можно по-идее написать функционал для вычисления нужного Margin'a, но даже как по-мне ,...

Uncaught ReferenceError: exports is not defined в next.js 14!
react-refresh-runtime.development.js:530 Uncaught ReferenceError: exports is not defined at eval (react-refresh-runtime.development.js:530:9) at eval (react-refresh-runtime.development.js:542:7) ...

Как сделать пагинацию на 18 версии React, который не поддерживает material/ui?
Вопрос в заголовке. Уже всеми способами, которые есть на ютубе и в гугле пытался реализовать Пагинацию, но все способы схожи, а потому эти способы в силу особенностей 18 версии Реакта не работают и...

Имеет ли смысл использовать Next.js в большом проекте?
Имеет ли смысл использовать Next.js в большом проекте? И если да, то в каком случае. Есть ли минусы его использования?

Как с помощью fetch вытащить данные подкатегории?
Есть Json файл с массивом данных, с помощью props я передаю его в компонент, на выходе получаю только категории например mainId, displayName, displayDescription, но как мне получить подкатегории...

Код работает с использованием «Live Server», но не работает при развертывании через «GitHub Pages»
получаю такую ошибку Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'. также код взаимодействует с сервером, который развернут на Сyclic ...

Redux-toolkit, как обновлять slice внутри другого slice
Добрый день, использую в React приложении Redux-toolkit и есть некоторые проблемы. Имеется хранилище с вызовом модального окна с информацией об ошибки. Туда нужно передать информацию (title, true...

tinyMCE editor
Здравствуйте. У меня не получается загрузить фото локально. Вот код редактора <Editor init={{ menubar: false, toolbar: 'undo redo | fontsize fontfamily bold italic |...

Возможно ли зарегистрировать свой кастомный компонент в useForm?
Подскажите, пожалуйста, возможно ли сделать мой собственный компонент Select таким образом, чтобы его можно было зарегистрировать в useForm так же, как обычные элементы HTML, например ? Вот пример...

Роутинг внутри таб элементов
Доброго времени суток! Пишу приложение на React и возникла необходимость настроить грамотный роутинг внутри табов. В чем суть. Входим в систему, слева боковая панель, переходим в кладку приложения...

Приложение на React не работает в Internet Explorer 11
Как обеспечить работу приложения в данном браузере?

Как хранить в state номер текущей страницы листаемого документа?
подскажите пожалуйста. вот загружается в контейнер pdf-документ, внизу надпись "страница 1 из 13", "страница 2 из 13" и т. д. номер текущей страницы надо хранить в стэйте. как это обеспечить? P.S....

ERROR: JAVA_HOME is set to an invalid directory: /usr/lib/jvm/java-1.17.0-openjdk-amd64
какую директорию не сую в JAVA_HOME, всё неправильно для проекта на react native. подскажите что сделать чтоб данная ошибка пропала?

dispatch из useReducer() не вызывает ре-рендеринг
Почему dispatch из useReducer() не вызывает ре-рендеринг компонента? export const WeatherForecast = (props) => { const = useReducer(reducer, s) useLayoutEffect(() => { ...

Каким образом можно обойти первый рендер от хука useEffect?
Доброго времени суток. Часа 3 пытаюсь решить одну проблему, на самом деле максимально примитивная. В общем, не вдаваясь в подробности. К примеру есть состояние и функция, которая меняет это...

useSound проиграть файл полученный из fetch
Добрый день, народ. Помоги разобраться Если я достаю mp3 файл с диска, то useSound работает отлично! const track = require("./04. Раб страха.mp3"); const = useSound(track); Но не могу...

Как сделать пагинацию?
Плиз, сделайте мне пагинацию. Я уже неделю голову ломаю и не хватает терпения самостоятельно сделать. Это невозможно - неделю потратить на то, что в интернете НОРМАЛЬНО не объясняют, а если и...

npm пакеты для серверной и клиентской стороны
Здравствуйте. Подскажите, пожалуйста, вот есть пакеты, используемые для серверной и клиентской стороны. На клиенте есть window, на сервере можно работать с файловой системой. Но не понимаю как...

Проблема авторизации React axios
Бэк написан на джанго, я пишу на реакте и пытаюсь авторизовать админа я посылаю вот такой пост запрос: axios .post('https://***/admin/', { username: 'admin_root', password: '12345root',...

Почему изменение ссылки на состояние в редукторе является плохим тоном?
Знаю, что редуктор должен быть чистой функцией. Но что именно в этом было бы плохого? Cпасибо. Добавлено через 38 минут То есть наоборот, почему считается плохим тоном возвращать из редуктора тот...

setState React и массивы
Здраствуйте! Подскажите, пожалуйста как решить следующий задачу с setState React. Искал но не нашел примеров с массивами внутри объектов....Как это правильно делается, где то читал что...

Действие после того, как Typewritter закончил печать
Всем привет! Как продолжить печать следующей строки или другое действие выполнить, но после того, как строка закончила печататься через Typewritter? Сейчас сделал на таймерах, но это не удобно...

Почему useState не передает функцию?
Здравствуйте. У меня есть такой код: let = useState(() => {return 1+4}) useEffect(() => { console.log(state) }, ) Почему в консоли я получаю не функцию, а результат...

Передача данных в компонент через Link
Всем привет! Написал такой код, но не получается извлечь переданные данные Смотрите строку с Link, там отправка данных компоненту реализована import React from 'react'; import { Link } from...

Подключение темы minimal UI из materialUI
на сайте есть инструкция как подключить - https://docs.minimals.cc/setup/ // src/theme/index.js 'use client'; import PropTypes from 'prop-types'; import { useMemo } from 'react';...

Вывод вершины при нажатии на кнопку
При нажатии на кнопку - на экране должна выводиться вершина. Пишу все как по учебнику, но ничего не выходит Вот код: import ReactFlow from 'react-flow-renderer'; const Form = () => { ...

Завершается процесс после закрытия консоли
Коллеги, приветствую! Ситуация: есть сайт и админка к нему. Живут на виртуалке в трех контейнерах. Сайт в одном, БД во втором и админка в третьем. После перезапуска виртуалки БД и сайт подняли,...

Ошибка window is not defined в Next.js
Вот мой код: 'use client' import {useState} from 'react' const fetchData = (i) => { return fetch(`https://jsonplaceholder.typicode.com/todos/${i}`, { next: {revalidate: 10} })...

Почему не запускается приложение на next.js?
запускаю с помощью yarn dev в консоль выводится warning ../package.json: No license field $ next dev ▲ Next.js 14.1.0 - Local: http://localhost:3000 warning ../package.json: No...

Ошибка рендеринга mobx
Доброго времени суток, у меня есть проблема, есть менеджер (MobX) RequestStore, в нём все состояния и методы, которые реализуют запрос на сервер (получают json с данными по заявке), но у меня...

Свое состояние для каждого элемента массива
Здравствуйте! Проблема в том, что по клику на один элемент и меняя при этом состояние - это состояние принимают все элементы. Нужные элементы справа от таблицы (редактирование и сохранение) ...

React Hook useEffect has a missing dependency
Всем привет, подскажите, только начинаю изучать javascript с axios... Решил попробовать реализовать конвертер валют. В общем выбивает ошибку при вызове useEffect, а именно: React Hook useEffect has...

Ошибка при использовании useEffect
Добрый день Возникла проблема, которую удалось отследить только до данного хука. У меня есть 2 компонента: 1. Accordion const Accordion = ({ /* ... */

Как правильно написать useEffect
Доброго времени суток, есть mobx и компонент, в менеджере делаю запрос к серверу для авторизации, всё обёрнуто цепочкой try catch finally, перед отправкой запроса перевожу состояние authInProgress в...

Разработка приложения на React Native
Всем добрый вечер! Я учусь на медика-биолога, и вот мне приспичило создать свое приложение-навигатор по миру биохимии. Где ни смотрел, везде пишут, что для одновременной разработки для Android и IOS...

Проблемы с состоянием аутентификации MobX
Доброго времени суток, создаю spa веб-приложение, для хранения всех состояний выбрал mobx, создал корневое хранилище (RootStore), создал хранилище с фичами для авторизации (AuthStore),подключил...

Не работает onClick у кнопки
import React, { Component } from 'react' import { Button } from 'react-bootstrap'; class ShowForm extends Component { constructor(props) { super(props); this.initialState = { ...

Как сделать счетчик, с прокруткой цифр по разрядам reactjs?
Всем привет. Есть счётчик цифр с анимцией. Первая анимация начнется через 10 секунд Вот пример Нужно сделать так, чтобы числа прокручивались по разрядам (возможно это называется по другому). ...

Что не так в коде?
onst groupByDate = (arr: Forecast5Days): Array<Array<Forecast5Days>> => { arr.reduce((new, for) => { return null }) return null }

Почему state работает не так как я ожидал?
Вот мой observer let observer = new IntersectionObserver(entries => { if (entries.isIntersecting){ setCurrentPage(currentPage + 1) console.log(currentPage) } }, {}) ...

Сайт на планшете не открывается из-за самоподписанного сертификата
Добрый день. Есть сайт, разработанный на React. Страница авторизации отличается для ПК и для планшета (Android). При открытии сайта на планшете, пользователь авторизуется при помощи QR ...

Как реализовать функцию ввода пользователем текста и разрыв страницы после определённого кол-ва строк
как с помощью react js реализовать функцию ввода пользователем текста и разрыв страницы после определённого кол-ва строк наподобие microsoft word/google docs или как это сделать на чистом javascript...

Отображение номера текущей страницы pdf документа
Листается pdf-документ. У каждой страницы есть индекс. Как сделать, чтобы под pdf-ом всегда отображался номер текущей страницы?? Спасибо!

How do I make commands in the running npm terminal?
Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.0.106:3000 Note that the development build is...

props.currentUser is not iterable
В app js у меня есть такой стэйт const = useState({ id:1, cname : "admin", password : "0000", data: }] })

Добавление компоненты в StoryBook
Доброго времени суток, есть такой вопрос, есть управляемая компонента, пропсами передаётся size с union типом 'small' | 'medium' | 'large', в StoryBook он подсказывает что это InputType, но при...

Реакт не рендерит компонент
Подключилa реакт к проекту на js. Ошибок нет, но компонент не рендерится. index.js: import {App} from "./App.jsx"; import * as reactDom from "react-dom"; reactDom.render(App,...

React - добавление элемента в конкретный список
В основном элементе отрисовывают два списка (из массивов, у каждого свой). <ItemsList list={first} set={setTheBacklog}/> <ItemsList list={second} set={setTheReady}/> Далее в элементе с самим...

Почему произошёл сбой со стилями?
Файл WeatherForecast.tsx содержит компонент, который возвращает JSX, в котором вызывается функция, возвращающая массив из элементов, каждый из которых содержит: <Alert bsPrefix='fgi'...

Почему не передается props?
Здравствуйте. Создаю компонент сортировки товара в зависимости от цены. Компонент выглядит так: <code lang="javascript"> <Routes> <Route path="salad" element={<Salad selected={selected}...

Вычисляемое свойство MobX пытается обновить само себя
Всем привет. Имеется хранилище MobX (класс AppModalsStore) с computed-свойством PaletteBookmarkModalState. При попытке установить его значение из компонента observator, падает ошибка Uncaught...

Почему ничего не выводится в теге <Container> material-ui/core
Добрый день. Не могу понять почему не выводятся конпоненты, которые заключены в тег <Container>. Подключила все что нужно, пишу в отдельном компоненте js. import React, { useState, useEffect }...

При выводе total выдает сразу несколько значений (в зависимости от того, сколько товара лежит в корзине)
const total = cart.reduce( (prev, curr) => prev + curr.price * curr.count - curr.price * curr.count / 100 * 10, 0 ) Эта часть кода позволяет считать общую стоимость товара с учетом 10% скидкой....

Как выполнить ререндеринг страницы после сортировки массива?
Вот код, он работает. Но сортировка происходит только в случае, если я выберу принудительно 0 страницу(она всего одна и она обозначается, как 0 - нулевая) нажав на неё кнопкой мыши. А динамически...

Отображение видео через react-video-js-player: The media could not be loaded
Всем привет! В плеере как правильно в коде указать путь к видео, расположенному на сервере http : / / w w w . ****** . online по адресу: /root/media/video.mp4 ? class WinMain extends...

Не работает prev (предыдущее состояние)
При написании функции addCart и добавлению ее в const value, сайт перестает полностью отображаться, не видит "prev". В консоли ошибка "Uncaught ReferenceError: Cannot access 'addCart' before...

Как я могу использовать context в getServerSideProps (и подобных функциях)
Здравствуйте. Мне необходимо получить url из контекста. Но проблема в том, что react хуки можно использовать только в react компонентах. Помогите пожалуйста. apiUrl и autorization должны быть в...

action payload undefined
Всем привет. Подскажите, пожалуйста, почему payload у action как undefined? В Postman все работает, в браузере нет import {createAsyncThunk, createSlice} from '@reduxjs/toolkit'; import axios...

Вызов endpoint из fetchQueryWithReauth
Пишу авторизацию на рефреш и аксесс токенах с использованием redux rtk query. И запрос, который в коде выделен красным совершается без использования эндпоинтов. const baseQuery = fetchBaseQuery({...

Не получается изменить цвет кнопки при получении инпутом фокуса
есть вот такой фрагмент кода <form className={css.formForEmail} onSubmit={handleSubmit}> <div className={css.inputBlock}> <input...

Отправка Post запроса с клиента с использованием токена (Core 8)
Добрый день! Пытаюсь отправить запрос на сервер Net core Вот сам запрос const PostClient = (e: any) => { httpModule.post("Client/PostClient", { Name: client1.name, Phone:...

Не получается выводить стрелки после создания связей между вершинами
Помогите пожалуйста, кто разбирается в этой теме. Уже долго не могу разобраться .... Не получается сделать так, чтобы выводились сами стрелочки между вершинами, после создания связей между ними ...

Не могу выложить проект на github pages
Добрый день. Выкладываю проект на gh-pages, но при попытки посещения этой страницы показывается только сообщение Unexpected Application Error! 404 Not Found { "name": "typing-training-app", ...

Uncaught ReferenceError: render is not defined
Приветик всем, у меня возникла ошибка. не могу запустить начальную обычную программу, только начала изучать. ищу в интернете не могу найти или что то не понимаю. Объясните пожалуйста. import...

Получение сведений о ссылке
Всем привет! В одном из компонентов не получается вызвать метод "contains" от "current" Как правильно написать код? Цель в том, чтобы когда кликаешь мимо модального окна, оно закрылось import...

package.json что должно быть в dependencies а что devDependencies
Добрый день. Пишу приложение при помощи React, делал package.json руками (не через creacte app) Закидывал всё в devDependencies Сейчас файл имеет следующий вид: { "name":...

Не обновляется компонент в массиве
Добрый день. Подскажите, почему не обновляется значение? import React, { useEffect, useContext, useState} from 'react'; import { useDispatch, useSelector } from 'react-redux'; import...

Регистрация и аутентификация с разделением ролей пользователей
Можете поделиться свежими или просто достаточно сильными источниками, кодом для изучения, инструкциями по написанию приложения с возможностью регистрации и последующей аутентификации с подразделением...

Как внедрить получаемый от сервера html
Доброго времени суток, есть страничка, в которой отрисовываются комментарии к записи, комментарии оставляют через html-редактор и с сервера возвращается стринга в виде html кода. Вопрос, как...

Составить SOAP запрос
Привет! Есть вот такое описание WSDL сервиса от 1С <definitions xmlns="http://schemas.xmlsoap.org/wsdl/" xmlns:soap12bind="http://schemas.xmlsoap.org/wsdl/soap12/"...

Теория о тестировании интерфейса
Доброго времени, есть несложный функционал, который уже пора бы покрыть тестами... Нет уверенности что всё вышеупомянутое относиться к категории юнит-тестов, поэтому если что, прошу поправить....

Не получается установить пакет mini VK
Запускаю на win10 npx @vkontakte/create-vk-mini-app <NAME> выдает ошибку: Creating project... ⏱ Copying VK Mini App source and configuration files.. VK Mini App source and configuration...

Изменение хэша в заголовке в Next.js 13
Всем привет! Реально ли отследить изменение #хэша в Next.js 13? Что я делаю не так? Сейчас выглядит, как-будто «hashchane» событие просто не работает - только при первом рендере. Я пытаюсь...

Как можно вместо массива использовать API json в виде внешнего файла?
Господа! Я пока не много знаю библиотеку React. Подскажите, как можно вместо массива использовать API json в виде внешнего файла? Вот исходник моего файла import React from 'react'; //import {...

Отображение картинок на странице
Вопрос избитый, неоднократно обсуждаем, с кучей решений и тд.. Но! Проблема. Не отображаются картинки в проекте. Реакт, компонент jsx. путь компонента: /src/components/post/post.jsx Пробовал...

Как запустить чужой проект?
Добрый день ... хотел скачать и запустить чужой проект, чтобы рассмотреть его функции... но столкнулся с рядом проблем ... что он не изволяет запускаться , и просто не знаю что делать, помогите...

Получение значение PromiseResult для объекта Promise
Здравствуйте, уважаемые форумчане! Выполняю запрос к PHP-скипту внутри конструктора классовой компоненты с помощью axios: class UniverseScrollTest extends Component { //Описываем компоненту...

Cannot read properties of undefined (reading 'map')
Нужна ваша помощь. Пробую собирать данные API с помощью redux. Когда хочу отрисовывать данные то получаю эту ошибку: Cannot read properties of undefined (reading 'map') Что я делаю не так? Спасибо...

Вызов метода при загрузке страницы
Добрый вечер, пытаюсь прикрутить API и выводить данные. Хочу получать данные при загрузке страницы, ну пока удалось только сделать при клике на кнопку. Как можно реализовать? class App extends...

React.js подключение внешнего js файла
Здравствуйте. Только что начал изучать React и дошло до того, что мой js файл не подгружает компоненты на страницу. Если этот же код поместить в <script> в html-е, то все работает. Библиотеки...

Маска для введения номера телефона (react-input-mask)
Проблема такая, существует большой компонент (InputMask из react-input-mask), у которого нежелательно менять onChange в него улетает маска вида phone: '+7 (999) 999-99-99', нужно сделать просто...

react/ react hook с Rxjs
Здравствуйте. Столкнулся с проблемой изучения библиотеки RxJs. У меня есть ТЗ, создать секундомер. Но проблема в том, что не могу разобраться как правильно использовать эту библиотеку с react hook....

Повесить событие на кнопку
Привет всем. помогите решить задачу, App одностраничный . На странице должны отображаться данные из базы, возможность добавлять новые данные, удалять, редактировать. Данные вытягиваю с помощью...

Обработчик события на клавишу Enter
Доброго всем времени суток! Нужно было повесить обработчик события на нажатие клавиши Enter. Походу дела я столкнулся с проблемой: элемент на который я вешал обработчик события на момент создания ещё...

Проверка аутентификации на react
Здраствуйте! помогите пожалуйста, как сделать проверку аутентификации, и если пользователь залогинился то перейти на страницу home, у меня что то нчего не получается, не пойму как это делать(((( вот...

JS React вывод массива списком
В чем косяк? <script type="text/babel"> const name = ; class Test extends React.Component { constructor(props) { super(props); const name = this.props.name; const list =...

Как сделать редактирование данных в самой таблице React
Привет народ, очень нужна ваша помощь, сделал небольшое приложение Crud работающее с базой данных, вот есть проблемка, нужно сделать так чтобы редактировать данные можно было в самой таблице. На...

TypeError: state is not iterable
Доброго времени суток! Подскажите, почему появляется такая ошибка? Это редьюсер: export let initialCostsState = { costs: , isActive: 200 } export const costsReducer = (state =...

Изменить значение в state массива
https://cdn1.savepice.ru/uploads/2018/11/16/32853a356a2a033bd8e914fe060f8157-full.png По нажанию на лайк, должен измениться цвет и увеличится кол-во на +1. Повторное нажание -1. Компанент для...

React (Balel) Какая разница в .js и .jsx
Вопрос в заголовке. Я раньше почему-то думал что .jsx файлы это спецификация файлов для компилятора babel, но тут на меня нашло озарение - бабелю же всё равно какие файлы компилировать и то есть...

Как подключить картинку?
Пытаюсь подключить картинку в свой проект. Он её выводит, но пишет что не может найти такой модуль в самом vs code. Как я понял это проблема самого редактора, он неправильно видит рутовскую...

Не запускается локальный сервер
Прохожу книгу React in Action, скачал репозиторий автора з 4 главы? вставил в корне диска C "https://github.com/react-in-action/letters-social/tree/chapter-4" пробую запустить его с консоли в...

Почему такая ошибка "TypeError: Cannot read property 'bind' of undefined"?
import React from 'react'; import ReactDOM from 'react-dom'; class Todo extends React.Component{ constructor(props){ super(props) this.state = { name: ' TODO ', ...

Отменить обновление страницы при выполнении метода
У меня есть кнопка <form onSubmit={this.props.weatherMethod}> <input type="text" name="city" placeholder="Город"/> <button>Отобразить данные</button> ...

Работа с iconv-lite (проблемы с кодировкой)
Всем привет. Суть задания такова Написать приложение для выполнения под ОС Android, которое переводит текст в одной кодировке (например win-1251) и записывает содержимое в другой кодировке...

Недостатки React
Здравствуйте. Расскажите пожалуйста о недостатках, архитектурный просчетах, неудобствах и т.д. с которыми вы сталкивались при написании приложений с использованием React. В рунете (да и не только)...

React js - рендеринг тормозит
У меня есть 2 компонента Первый это таблица на основе fixed-data-table-2,(около 100 строк, будет больше) при клике на ячейку таблицы хочу показать модальное окно. В браузере вижу предупреждение **...

Почему не работают ссылки React на хостинге?
Написал заметочник на React. Заметочник состоит из нескольких страниц. Для навигации использовал react-router. Локально работает все замечательно. Но после того как сделал react build и выложил на...

Инструмент для парсинга сайта (nodejs + reactjs)
Нужен совет. Начал недавно изучать js + reactjs. Делаю первый сайт в целях обучения. Использую: nodejs, react(material ui, DevExtreme grid), npm. Идея следующая: 1. Парсить данные с...

Cannot add property currentTime, object is not extensible
Здравствуйте! Проблемка в следующем ..... В компоненте есть элемент <audio> обращение к нему сделано через ref let audioRef = React.createRef(); return( <div> <audio ref={audioRef} ...

ReactJS. Обновить данные при добавлении в localStorage
Всем привет, есть данные в localStorage, я их вывел на страницу, потом сделал функции добавления новых значений. Ввожу в инпуты, после нажимаю добавить и в алерт выводит это данные, потом в...

Uncaught SyntaxError: Unexpected token '<'. Что делать ?
Была проблема с импортом, решил обойти через константы ибо даже с "type:module" не видел модуля. Тут появилась другая проблема, начал ругаться в сторону рендера, а конкретно в строке: contents=...

После установки ReactJS появляется белый экран, вместо заставки
Здравствуйте, уважаемые форумчане! Пытаемся переносить проект на ReactJS, но пока, к сожалению, ничего не получается. Вместо заставки в <div id="root"></div> ничего не загружается. Да еще, ошибки...

Настройка proxy в package.json
Здравствуйте. Создал две папки с проектами creat-react-app и laravel. Для тестирования использую Open Server. Для полной картины распишу: /OSPanel/domains/laravel /OSPanel/domains/react ...

Удаление элментов из DOM модели
Добрый день, как удаляют элементы из DOM модели на React? На Jquery мы находили элемент по селекторам и удаляли. А здесь как это работает?

React на хостинге
Пытаюсь установить react на хостинг beget, как тест и получаю, ошибку с import, webpack и babel установлены, настройки по node на beget выдержаны, облазил весь stackoverflow за решением, поддержка...

Можно ли учить react не зная JS?
Можно ли учить react не зная JS?

React форма авторизации
Предпринемаю очередную попытку глубже войти в фонтент задача такая сделать форму авторизации(логин). Создал проект create-react-app создал компонентю нарисовать формачку не сложно(можно любой...

Как извлечь html из react?
Всем привет! :) Я хочу сделать так, чтобы реакт компилировал html, чтобы полученный html можно было использовать в проекте. Конечно можно найти содержимое контейнера root в браузере, но не хочется...

Как задать плавный toggle в ReactJS?
Здраствуйте! помогите кто знает как в react задается скорость открытия блока? Сейчас у меня блок открывается слишкрм быстро constructor() { super(); this.state = { ...

Does not contain a default export
Получаю вот такую ошибку ./src/components/Profile/MyPosts/MyPostContainer.jsx Attempted import error: '../../../StoreContext' does not contain a default export (imported as 'StoreContext'). при...

Почему не удаётся запустить проект?
Помогите мне пожалуйста. Пытаюсь запустить проект, разобраться с реактом. Читаю в файле package.json "build": "webpack -p --config webpack.production.config.js --progress --profile --colors",...

Не могу понять почему "Unresolved function or method map()"?
Здравствуйте, не могу понять почему "Unresolved function or method map()"? Всё четко компилируется, но у WebStorm пишет предупреждение(ст 31) "Unresolved function or method map()". Подскажите...

Ошибка [nodemon] app crashed - waiting for file changes before starting
Не подгружаются посты, а также почти сразу выбивает ошибку TypeError: Failed to fetch в браузере репозиторий проекта https://github.com/react-in-action/letters-social/tree/chapter-4 ничего в...

Удаление элемента по его id
Добрый день! У меня есть небольшой список, состоящий из отдельных компонент. Мне нужно сделать так, чтобы элемент по которому кликнут сначала выделялся(можно и без этого), а потом и удалялся кнопкой...

i18next способы смены языка
Я сделал два хелпера для создания компонента с переводом слова, всё работает. import moment from "moment"; import i18next from 'i18next'; import {Translation} from 'react-i18next'; import...

Многостраничный ReactJS
Всем привет) изучаю реакт и вот вопрос. С компонентами разобрался, как работает пропс тоже. Вот теперь вопрос: Есть какое - то меню например: Работники и Отчет. В работники мы вносим наши...

Создание и скачивание файла по нажатию на кнопку
Добрый день, Я новичок в js и react. Пытаюсь разобраться в следующем. С бэка на фронт приходит строка. Я хочу, чтобы при нажатии на кнопку создавался файл txt с этой строкой и начиналось его...

При хранении объекта в Redux, как хранить состояние полей редактирования (input)?
Есть некоторый список, который хранится в redux, например такой: { 1: { name: 'Саша', }, 2: { name: 'Маша', }, 3: { name: 'Наташа',

Как обратиться к массиву, который в массиве? React
Всем привет, подскажите как можно обратиться к массиву, который в массиве? Вот мой код: import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor()...

Изменение цвета параграфа
Добрый день! вот задача: Параграфу реализовать выбор цвета. Можно выбирать из всего спектра (<input type="color" />) или использовать только 5-7 ваших любимых цветов (как в Google Keep). class App...

Не собирается приложение - ошибка в файле index.tsx
Всем привет. Пытаюсь собрать приложение React webpack-ом, но выдает ошибку: ERROR in ./src/index.tsx Module build failed (from ./node_modules/ts-loader/index.js): Error: TypeScript emitted no...

Вывод данных полученных в axios
Всем привет! Я изучаю reaсt и решил сделать попробовать получить данные с сервера. Я написал такой код: export default class PersonList extends React.Component { state = { post: ...

Запретить пробелы в input
День добрый! Помогите решить проблемку. Есть input добавления тегов и кнопка чтобы их добавить. Нужно чтобы в инпуте было запрещено вводить пробел. Заранее спасибо)! формы написаны через...

Ошибка "Failed to compile"
При попытке перебросить const gameSettings в компонент < Game /> вылазит ошибка "Failed to compile ./src/app.js Line 38:27: 'gameSettings' is not defined no-undef Search for the keywords to...

Пропадают элементы после перезагрузки страницы
У меня есть код, который создает мне список моих задач. Код является работающий. После того, как я создаю задачи, выполняю перезагрузку страницы то все мои созданные задачи пропадают.У меня есть 2...

Преобразование JSON в массив объектов JS
Всем привет. Помогите, пожалуйста, разобраться с проблемой, так как в голове полная каша и я уже не знаю как мне с этим справиться. Есть локальный сервер, который я создал, чтобы протестить запросы...

Нужна критика кода переключателя темы на React
Здравствуйте, нужна критика кода переключателя темы. Что сделано не так, что улучшить? Принимаю любую критику. gitHub:...

Как вывести запрашиваемые данные из JSON (Reactjs api call)?
Доброго времени суток. Начал изучение API call на ReactJs. Данные из JSON вывел , без каких либо проблем, но вот теперь хочу сделать вывод данных по запросу который вводят в Input. И не совсем...

ReactJS: render таблицы
Скажите, плз, как отрендерить пустую таблицу (напрмиер 4 колонки и 4 столбца) в ReactJS через массив?

Input type search, событие по кноке очистить
Доброго времени суток. Ребят подскажите с вопросом, компонент в котором есть input с типом search. Как обработать событие очистки поля по нажатию на "крестик". Заранее спасибо большое.

Render массива объектов
Доброго времени суток! :) Подскажите, пожалуйста, чего бы React мог ругаться на подобную форму отображения массива с объектами? getBlockMarkup = (blocks) => { const Block = ({data}) => ( ...

Рендер списка объектов карточками
Я новичок и некоторые задачи ставят меня пока в тупик. Есть API с массивом карточек товаров Нужно написать App, который будет рендерить список объектов карточками.

Как сделать анимацию переключения картинки
Доброго времени суток! Я только учусь и поэтому прошу сильно не ругать за возможные глупости! :) Делаю учебный проект интернет магазина на React.js + Redux, так вот сделал я компонент по типу...

Всплывающее окно на определенной кнопке
Приветствую формучане, я еще новичок в JavaScript с React и пока не совсем понимаю как решать данную проблему. У меня есть определенный список который отображается методом map из сервера на 56...

Как в React в onclick вызвать функцию из другого файла
Допустим у меня есть файл heder.js import React, { Component } from 'react'; import './header.css'; class Header extends Component{ signIn = () => { alert('clicked'); }

Динамическое меню
Здравтсвуйте! Использую React + redux и не могу понять, как правильно организовать динамическое меню. В хедере навигация и при нажатии на одну из ссылок, загружается 2 столбца - контент и меню....

React и clearInterval
Добрый день! <div onClick={this.start.bind(this)}>старт</div> <div onClick={this.stop.bind(this)}>стоп</div> Две кнопки, (код упрощен) timer() { const...

Фильтр строк по любым буквам React.js
всем привет. есть такое вопрос. даны любые слова (строки). Компоненту в props передаётся массив строк. Он отображает их в виде вертикального прокручивающегося списка. Есть инпут. При вводе текста в...

React. Список пользователей
https://jsonplaceholder.typicode.com/users Нужны столбцы таблицы:id,name,email. Я новичок в React.

Нет подключения к firebase
Создаю react приложение. Нужна бд firebase. Настроила, но при запуске ошибка: высвечивается сообщение, что подключение не доступно('Error loading the Firebase SDK, check the console.'), затем...

Срендерить строку с html
Как срендерить строку с html? render() { var title = '<b>Строка</b>'; return ( <div> {title} </div> )

Как выполнить AJAX-запрос в React?
Я хочу получить данный с сервера и сохранить их в state. class NavBar extends React.Component { constructor(props) { super(props); this.state = { navs: {}, ...

Можно ли сделать соц сеть на javascript, react.js, ajax, mysql?
можно ли сделать соц сеть на javascript, react.js, ajax, mysql?

ReactJs изменение цвета после ввода названия цвета
Здравствуйте, извиняюсь, что написал возможно, не самый понятный заголовок, но мне не пришло в голову более подходящее название. Начал учить Reactjs и застрял перед вроде очевидной, но мною не...

React_js ошибка error:0308010C:digital envelope routines::unsupported
как сделать чтобы реакт заработал? в консоли браузера такая ошыбка - crbug/1173575, non-JS module files deprecated. работаю в vs code на macos ...

Callback с аргументами
В react приложении есть метод render() render( return( <div className="msu"> {listData.slice(0, 5).map(i => { switch(i) { case 0: ...

Как вывести двойной ассоциативный массив в react
echo json_encode( array( 'English' => , 'French' => ) ); render() { const { error, isLoaded, items } = this.state; ...

Автоматическое нажатие на кнопку через 10 секунд
Добрый день. Есть следующая проблема. Нужно как-то совместить setTimeout и onClick на React JS. Хочется сделать автоматическое нажатие на кнопку через несколько секунд. Рабочий код (нажатие вручную...

Ошибка масштабируемости карты Leaflet на React
Товарищ, хочу поведать о своей проблеме Решил я значит сделать карту на Leaflet и React, а она и не работает, точнее криво-косо. Для начала просто вставил пример с офф сайта.(Первая картинка) ...

React не применяются стили
Доброго времени суток! :) Имею следующую ситуацию - подключаю к js файлу css stylesheet, но стили не применяются. Имена классов в теги добавляются, а стилей нет. Не добавляются как в таком...

Редактор текста
Как переделать такой код под использование textarea вместо input? При попытке заменить input на textarea текст перестал редактироваться при потере фокуса var TextEditComponent =...

Как отключить событие фокуса у дочернего элемента?
Как отключить событие фокуса у дочернего элемента? В коде ниже работает получение фокуса у родительского div и когда он теряется, однако проблема в том, что при клике на дочерний элемент этого div...

Store не хранит состояние
Здравствуйте! Создал store с помощью hook'ов: /*code...*/ import { InsuranceItemContext } from './Context/InsuranceItemContext'; import { reducer } from './Reducer/Reducer'; function...

Загрузка изображения из API
Как правильно в React.js преобразовать изображение, полученное из API, - в строку base64? const App = () => { const = useState(" ") useEffect(() => { ...

Можно ли создать сайт полностью на реакте?
Можно ли создать сайт полностью на реакте? То бишь весь htlml чтоб на нём был, и head и body? Пока дак пробывал в бади менять и сервис http://tools.neilpatel.com html не видит, но если в index.php ...

SetState не обновляет дочерние компоненты
Всего 2 компонента, родитель и ребёнок для вывода через map в строке 276. Саме дурацкое, что через консоль лог показывает, что общая цена this.state.amount меняется, map тоже проходит по новому...

Вынос fetch "post" запроса в отдельный файл
Здравствуйте, подскажите пожалуйста можно ли вынести "post" запрос в отдельный файл? Я сделал папку с файлом "api.js" и вынес туда "get" запросы, хотел бы узнать как можно вынести и "post" запросы...

Как экранировать кавычки для строки перевода из i18next?
В перевоед попробывал так. errorFileAvatar: "Ошибка файла \"Аватар\": ", При рендере export default function T(props) { return ( <Translation> {

Привязка к value в input
Видел, что привязывают какое-то свойство стейта к value в input, затем каждое событие onChange вызывается функция в которой проводится каждый раз метод setState, для того чтобы сделать поле...

ReactJS. Webpack. Как проверить версию браузера до подключения библиотек к проекту?
Всем привет!! Собираю проект Web Psck-ом, подключаю модуль React. На низких версиях типа Opera 18 получаю ошибку: Uncaught ReferenceError: Map is not defined ...

Не устанавливается флажок checked (radio button) в onChange не меняется при нажатии на радио кнопку
Здравствуйте, я в React JS новый, хотел бы кое что уточнить Код есть, в базе данных все корректно меняется при нажатии на кнопку. Проблема лишь в том, что оно не check-ается по внешнему виду(на...

Плавающая ширина input
Здравствуйте, возник вопрос, может кто-то знает как сделать плавающую ширину инпута? Стили написаны на material ui (material table), сам код на ts (react). У меня задание таковое, что нужно сделать...

Не могу разобраться как вставить ссылку
Здравствуйте у меня возникла проблема у меня есть кнопка мне нужно указать ссылку на эту кнопку но у меня не выходит помогите пожалуйста. Писал по разному в html <a href="http://yandex.ru"...

Как правильно удалить элемент по таймеру
if (props.error) { cls.push('fadeIn', 'modalShow') setTimeout(cls.splice(-2), 3000) } Пытаюсь сделать модальное окно, которое после появления висит 2 секунды и исчезает....

LocalStorage для корзины товаров (React/Redux)
Привет! Стоит задача, чтобы после перезагрузки данные корзины покупок оставались. Я пытаюсь это прикрутить через LocalStoge и Redux. Прошу помочь. Я совсем не понимаю иду ли я в правильном...

Не работает "React.lazy"
Здравствуйте, не работает "React.lazy", помогите пожалуйста что у мне не так с кодом. index.jsx import React, {Suspense} from "react"; import ReactDOM from "react-dom"; //Components //...

Залить проект на хостинг
У меня есть проект на реакте. Мне нужно его залить на хостинг. Мне нужно для этого какой то бэкенд или webpack-dev-server сгодиться? Я просто раньше вообще с этим не сталкивался. Что нужно сделать,...

Постраничный вывод данных на react
Привет. Сразу к сути - нужно сделать на react постраничный вывод товаров. Вывод всех товаров на страницу у меня реализован, но нужно чтобы на одной странице было не более 16 товаров. Подскажите...

Не работает scss в react-е
Здравствуйте. Не распознается синтаксис scss у меня в react проекте. Установил его, yarn перезапустил, прописал в webpack.config.js { test: /\.scss$/, use: ...

Не отображается выпадающий список
Здравствуйте! Изучаю React. Возникла необходимость сделать из JSONа многоуровневый select. в консоль выводятся значения, а вот в рендер не получается передать ничего. Помогите, пожалуйста. Что не...

Ошибка Uncaught TypeError: Cannot read property 'value' of undefined
Всем привет! Я новичок в react. Работаю с jHipster. Пытаюсь получить значение, которое выбрано пользователем в выпадающем списке Select библиотеки Ant Design. 1.Вначале, в событии...

Как вывести данные из массива JSON?
Есть компонент Item: return ( <div className="item"> <img src={ image } alt="pizza1" className="item-preview"/> <h3 className="item-name">{ name }</h3> <div...

Анимация появления и сокрытия формы в React
Условие: При нажатии на кнопку должна с анимацией появляться форма, данные с которой отправляются на сервер. Введённые ранее данные сохраняются в localStorage, после отправки формы localStorage...

ООП в React
Перед изучением react нужно хорошо разбираться в ООП js или сейчас достаточно знать функции js и сразу можно изучать react? С появлением hooks, как я понимаю, он стал более функциональным.

Не могу разобраться: TypeError: Object(.) is not a function
13 | 14 | const store = createStore(rootReducer, 15 | compose( > 16 | applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})), 17 | ...

Как подгрузить картинку в компонент, если путь к ней лежит в json файле?
задумка: слайдер, у которого инфа для слайда(название, характеристики и прочее) содержится в json(для теста), там же и путь к картинке. не подгружает. подскажите, пожалуйста, как быть. "gazel":...

Redux. Изменение store после удаления элемента
Всем привет. Разбираюсь с работой React и завис с одним моментом. Делаю заметки - отобразить из базы (mongodb), добавить новую, удалить. Сделал все, кроме удаления. Смысл загвоздки вот в чем:...

Сортировка товара
Здравствуйте! Подскажите как сделать сортировку при выборе (названия, цены, рейтинга...) Есть код, import React, { useState } from 'react'; import myArray from '../myArray'; import...

Двойной рендеринг в React
Добрый день, начинаю изучать react, сделал авторизацию через Firebase, после того как зашёл на сайт и при обновлении страницы сначала прогруживаются кнопки, а потом показывает сообщение, что я уже...

Как перерендерить страницу
Приветствую всех, у меня возникла наверно довольно простая проблема, но я пока начинающий React разработчик. Я пишу свой TodoList и пробую при удалении объекта из массива перерендерить страницу, но...

Как загрузить на сервер картинки через CKEditor 4. React
В общем я задал такой же вопрос на стек овер флоу, но хотелось бы узнать и ваши мнения https://stackoverflow.com/questions/59749038/how-upload-images-to-server-using-ckeditor-4 Суть задачи состоит...

Как менять состояние кнопки только у одного конкретного элемента, взятого из массива c map()
Как менять состояние кнопки у одного конкретного элемента, взятого из массива.map(), так, чтобы у других состояние не менялось вместе с ним??? const array = //пример массива function...

Добавить валидацию и отправлять форму, только когда поля заполнены
Допустим такой компонент и к нему тест. куда прописать следует заполнение поля title? import React from 'react'; export default class Order extends React.Component { constructor() { ...

React.JS + Redux. Отправка запроса и чтение данных JSON
Всем привет. Работаю на ASP.NET Core. Подключил React/Redux. И теперь есть одна проблема. Создал код для подключения к серверу. Но почему-то не могу получить данные JSON. Вот код actionCreators: ...

Не получается поставить bootstrap
При попытке устаноки бутстрапа https://facebook.github.io/create-react-app/docs/adding-bootstrap через npm выводит npm install --save bootstrap npm WARN bootstrap@4.2.1 requires a peer of...

Подключение Bootstrap
Доброго времени суток всем! В одном из скринкастов https://learn.javascript.ru/screencast/react#react-css для знакомства с React увидел, как автор подключает Bootstrap из терминала своего редактора...

Получить значение ключа объекта
Добрый день коллеги. Получается вот такой код import React, { Component } from 'react'; import PropTypes from 'prop-types'; import styles from './MovieItem.module.css'; import * as...

Как вывести необходимые данные из массива объектов?
Здравствуйте! Только начал свое знакомство с ReactJS и нужно сделать сайт-тест знаний пользователя по определенной теме. Есть вот такой state. На данный момент не могу понять, как мне вытащить title...

Вызванный компнент функция появляется только после обнвления страницы
Всем привет. Вот начал изучать React JS Не могу решить одну проблему. Есть 2 файла. App.js и Main.js App.js import React, { useState, useEffect,Component} from 'react'; import logo from...

Вставка данных в таблицу react
Здраствуйте, пишу для себя проект и тут хочу отмечать посещение людей. Данные получаю в json и хочу вывести их в таблицу с помощью Checkbox. Но так как данные приходят не особо красиво, то у меня...

Не работают Route
Всем привет, изучаю React и не могу понять почему не работают пути, localhost3000/user открывается но на ней только navbar index js ReactDOM.render( <React.StrictMode> <BrowserRouter> ...

Сортировка массива и его отсортированное отображение по клику на кнопку
Есть некий набор информации представленный в массиве. Проблема в том, что не могу реализовать через switch саму сортировку и отображение его же по нажатию на кнопки. Подскажите, пожалуйста , в чем...

Аналог querySelectorAll в ReactJS
В нативном js для поиска дум элементов, чтобы узнать их количество я использовал querySelectorAll и lenght для определения сколько таких-то элементов существует у меня с нужным мне классом в данный...

Разделение доступа в react / redux приложении
Есть родительский компонент, в методе componentWillMount проверяю соответствие роли, если роль не подходит делаю редирект class WrapperAdmin extends Component { componentWillMount() { ...

Кредитный калькулятор
Ищу туториал (не видеоурок), где сказано, как сделать кредитный калькулятор.

При нажатии на кнопку скрыть компонент
На сайте имеются кнопки(1 изображение) при нажатии на лупу должно появляться поле поиска(2 изображение) на месте кнопок и названия ProgUser.js const buttons = ; return ( <App...

Как редактировать сайт на ReactJS?
Здравствуйте, я только-только начинаю изучать React и у меня в голове сложилась примерно общая такая структура файлов На днях мне дали посмотреть на реальный проект. И такой файловой структуры я...

Валидация мапы на Yup
Есть некоторый массив ключей const products = ; и стейт компонента в виде мапы import React, { Component } from 'react'; class Animal extends Component {

Сортировка записей по дате создания
Здравствуйте, на данный момент в пагинации на первой странице ввыводятся старые записи на последней новые. Как отсортировать наоборот? Чтобы на первой странице были новые записи. <div...

Как вытащить данные с backend?
Есть данные с бэка: Вот как я хочу забрать эти данные: const = useState()

Изменение цвета случайного div'a
Имеется игровое поле с 25 div'ами. По клику на кнопку "Play" случайный div должен окрашиваться в синий цвет. По клику на div с синим цветом он должен перекраситься в зеленый. Если клика не было - ...

Загрузка json файла, используя запрос
Доброго времени суток! не могу получить json файл используя запрос - возвращает почему-то страницу. помогите разобраться, в чем проблема. файл load.js import React from 'react'; export...

Как записать несколько обработчиков событий в "onClick"?
onClick={this.showConsole} Здравствуйте. Допустим я имею два или три обработчика событий и я хочу что бы они исполнялись при одном событии. Как это правильно записать в ...

Axios отправка картинки на сервер
Всем привет. Есть у меня бэк и делаю для него front. Надо сделать форму регистрации, сделать, но она не отправляет изображение. Выводит ошибку 415. Просидел и продолбался 2 часа. Но нечего не...

Передача значений между компонентами с использованием redux.
Добрый день. Необходимо передать переменную из одного компонента в другой, появилась идея использовать в качестве буфера Redux, но мне кажется, что это не совсем хорошая идея. Подскажите, это...

Изменение состояния useState
Есть такой код: import React, { useState } from 'react' const Task = () => { const = useState( {name: 'Иван', age: 25, show: false} ); const handleClick = () => { ...

Обновление данных в форме
Доброго времени суток, появился вопрос по react'у. Есть код: export default class HelloWorldApp extends React.Component { constructor(props) { super(props); this.state...

Expo проект при запуске крашится npm ERR C:\npm-cache\_logs\2019-12-20T19_04_34_353Z-deb
> @ start D:\code\react-native\Firstproj > expo start Starting project at D:\code\react-native\Firstproj Expo DevTools is running at http://localhost:19002 Opening DevTools in the browser......

Почему событие срабатывает только со второго раза?
Пишу клон трелло и событие написано на добавление доски и задачи но почему работает только со второго раза подскажите? Компонент где происходит событие export const...

Галерея с модальным окном(и миниатюрами картинок)
Не могу найти галерею с модальным окном и миниатюрами для картинок https://jfcaiceo.github.io/react-lightbox-component/ Этот пакет хорош, но он принимает сами картинки и уменьшает их через ксс, а...

Как связать между собой текст списка и чекбокс в нем
Привет всем!есть список состоящий из массива, нужно сделать так что бы текст <li> зачеркивался и отменялось подчеркивание в зависимости от состояния checkbox'а. не могу понять как их связать если при...

Чтение для rectJS из json файла
Всем привет! Проблема: изменился формат подаваемого на вход json файла и не получается переписать код для нового фрагмента. Была программа, которая нормально читала данные из json файла для...

Передача функции от Родителя к Ребенку
У родителя есть функция updateText() {} нужно передать ее ребенку, чтобы там использовать - вызвать Изначально рендрю вот так <Task key={i} index={i}> так ошибок не находит но когда...

Метод в Redux реагирует на клик со второго раза
Пробую пример для понимания редакса создал, 2 кнопки инкремент и декремент. Клацаю на любую из этих кнопок значение меняется лишь со второго клика на одну из этих кнопок и после этого же второго...

Обновление данных firebase в React приложении
Доброго времени суток!) Интегрирую в React-приложение типа todo-list подключение к Firebase. Получаю данные и добавляю их в state в componentDidMount(). Добавляю новый item в БД в...

Оплата с использованием Stripe
Необходимо подключить оплату к сайту ,выбрал Stripe.При первой записи все работает ,но тут стандартная форма,так же нашел уже готовый вариант с готовой формой с оф библиотеки ,Но не понятно как...

Компонент React Select (Creatable). Как сделать так, чтобы при клике не открывался выпадающий список?
https://react-select.com/creatable Я хочу сделать так, чтобы выпадающий список с элементами списка открывался только при клике на области, помеченной оранжевым цветом на скриншоте (стрелочка...

Как обновить контент на странице из модального окна с использованием react-router-dom
Существует модальное окно, которое добавляется на страницу, нажатием специальной кнопки, и полностью удаляется со страницы, нажатием на кнопку закрытия. Я хочу добавить <Link /> внутрь модального...

ReactJs связать с opencart или другими CMS системами
Как можно связать reactjs с различными CMS системами, понятно что через API, но нужен конкретный пример и/или ссылка на урок где рассказывается как это делается. Спасиб.

Ошибка с babel
Как видите не получается поправить версию бабеля пробовал пару решений безрезультатно, у кого какие идеи??? ERROR in ./src/index.js Module build failed (from...

Массив из компонентов!
Надо вывести репозитории GitHub (например, только их имена). Есть компонент для одного, отдельного, репозитория. Как вывести весь массив репозиториев? Главный компонент App.js: import React...

Как избежать перерисовки незатрагиваемых компонентов
При нажатии кнопки меняется текст сообщения. Как избежать перерисовки не участвующего в этом взаимодействии грида ? Пример на codesandbox.io Код привожу и здесь import React, { useState,...

Ошибка TypeError: this.previousElementSibling is undefined
Почему происходит ошибка ? Uncaught TypeError: this.previousElementSibling is undefined class CustomSpinInput extends Component { onChange = (e) => { ...

Почему не размонтируется компонент?
Приветствую уважаемых коллег.! Сначала делаю так: render() { return ( <div> {this.props.conditionToShow && <Component1 />} </div> ) В этом случае, всё работает как надо: Каждый раз...

При клике на ссылку не открывается нужный контент, хотя url меняется.
Привет. При клике на ссылку не открывается нужный контент, хотя url меняется. После перезагрузки все подгружается или когда сам вручную меняю адрес. header.jsx import './header.css'; import {...

Вывод данных полученных в axios
Всем доброе время суток. Сижу и пытаюсь разобраться в React, смог вывести одиночные данные полученные в axios, но не могу вывести массив данных. Может кто подскажет как то сделать? Я сделал fake...

Отправка JSON и form-data одним запросом?
Добрый день, у меня есть форма с фотографией и текстовыми полями. Можно ли в одном POST запросе отправить и картинку и json, т.е, чтобы "Content-Type" был form-data и JSON

Вставить на страницу строку с тегами
Добрый день. Подскажите, как вставить на страницу строку с тегами? let header = 'qqq <b>eee</b> rrr' return( <div className='container'> {header} </div> ...

Модальное окно с кастомным компонентом
Добрый день. У меня имеется react + redux приложение. В рамках приложения описан компонент модального окна, который вставлен в корень страницы и отображается на основе состояния из redux. Модалка...

Сколько времени займет изучение фреймворка?(извините за тупой сами знаете что)
Знаю, вопрос глупый, у всех по разному и всё такое, кто-то может сказать хоть примерно нужно на изучение фрейма для поиска работы и конечно же полезные ссылки и книги для изучения не помешали бы,...

Не отображается ReactJS
Только начал учить библиотеку React так сразу же не задалось. В качестве рабочей среды использую Visual Studio code. Решил написать простенький код по выводу надписи. Файл с jsx: import React...

Как отловить событие перехода на страницу с redux?
Приложение создано с помощью react creat app, сверху поставлен redux и router. Хочу узнать как поймать событие перехода по ссылкам(компонент Link к компонентам-страница) внутри приложения.

React.js с Material-ui
Привет ребята! Возник вопрос и проблема с React.js. Я написал код который должен вывести мне кнопки в стиле Material-ui, однако браузер выдает ошибку: Uncaught ReferenceError: require is not defined....

React компонент без рендера и получение содержимого контейнера
class UserManager extends React.Component { constructor(props) { super(props); this.state = { value: null, };

Изменение маски ввода input в зависимости от выбранного значения в select-box
Здравствуйте, подскажите (возможно есть готовый пример) как реализовать следующую задачу, имеется форма построенная компонентом formik , в которой используется react-select, на форме размещен...

При нажатии на Enter форма не отправляется
При нажатии на Enter форма не отправляется(хотя при нажатии на инпут с типом "submit" всё работает). В консоли появляется ошибка "Form submission canceled because the form is not connected". Как это...

useState поменять местами элементы массива
Здравствуйте!!! Подскажите, допустим есть массив cards, с помощь драг энд дропа я захватил элемент с id 1 и перетащил на элемент 4. Как поменять их местами в setCards?(обновить состояние в onDrop) ...

Redux form попытка очистить конкретный field
Всем привет, есть такая форма. <form className={classes.listField} onSubmit={props.handleSubmit}> <Field validate = {} name = "filmName" type="text" label = "Название фильма" component...

Плавное изменение текста столбца таблицы при получении новых значений
Допустим есть массив { items: } Данные грузятьс и выводятся в рендере через map - всё ништяк, но мне нужно что бы компоненте li2 в его дочернем диве с классами val1 и val2 новые...

Практика react-redux
Хотел я значит сделать игру, так как более менее основы знаю react+redux, а итоге такого наворотил, что понял, нужна практика и много практики, от малой до великой, посовейте, плиз, как практиковать...

Не работает правильно Маска номера телефона
Здравствуйте. Не работает правильно Маска номера телефона. Когда пишу в поле номера телефона, то в state-те получаю артефакты, но не могу понять почему. Функция-маска, работает, но как только...

react дождаться выполнения асинхронных функций
Добрый день. У меня две асинхронные функции ServiceApi.getMatgrouplist(access_token) .then((data) => matgroupListSuccess(data)) .catch((err) =>...

Виджет комментариев переделать с react на redux
вот этот код нужно переделать в redux с компонентами редьюсерами и так далее долго уже пытаюсь никак не получаеться( App.js import React, { Component } from 'react' import { format } from...

Использование setState с forEach.
В работающем примере import React from "react"; import ReactDOM from "react-dom"; import App from "./components/app"; import "./styles.css"; const listItems = ; const rootElement =...

ReactJS. Почему не работает код? В консоли нет ошибок!
Почему не работает код риакта? В консоле нет ошибок, и на екране нету текста который я хочу вывести <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

Наложение изображений
Привет. Как подступиться посоветуйте, если сталкивались: нужно получить два изображения, наложить одно на другое и сохранить в третье. Есть мысли? СПАСИБО

Разница между React и React native
Я хочу начать освоение React для фрондента, но при этом хотел бы иметь возможность писать мобильные приложения. И поэтому у меня вопрос: эти фреймворки сильно отличаются друг от друга? Много ли...

Почему синтаксис "useMemo" в моем коде вызывает предупреждение?
Здравствуйте, почему синтаксис "useMemo" в моем коде вызывает предупреждение? Сколько зависимостей я б ненаписал всеравно это предупреждение. Как это устранить? Нету предупреждения только когда...

Сделать виджет комментариев
Напишите виджет комментариев на React со следующей функциональностью: 1. Отображение списка комментариев: автор, текст, дата и время 2. Добавление нового комментария (поля для ввода: имя...

React и Api: вывод элементов.
У меня есть API, с помощью которого я вывожу продукты. У меня продукты в API разделены на категории. И у меня есть кнопки категорий к этим продуктам, но они повторяются. Помогите пожалуйста: как...

Нужны ли знания Typescript если идти на на Junior UI Web Dev (React)?
Здравствуйте, нужны ли знания Typescript если идти на на Junior UI Web Dev (React)?

Как прокинуть ref в другой (чужой) компонент
Использую css-framework: react.geist-ui.dev В форме при проверке (react-hook-form), устанавливая ref в компоненте Radio, получаю ошибку: Function components cannot be given refs. Attempts to access...

Всё тот любимый undefined
Здравствуйте! Не понимаю сути этой ошибки: При передачи данных в store пишет, что у меня undefined(хотя там есть данные)(проблемы с getPockeBlock): import React from 'react'; import...

Не могу сделать редирект
Здравствуйте. Я использую React Routing, по этому все пути у меня содержат символ решетки после хоста. Вероятно по этому возникает следующая проблемма. Я нахожусь на странице вида...

Unexpected string concatenation of literals no-useless-concat
Здравствуйте, уважаемые форумчане! Не могу никак избавиться от предупреждения в заголовке темы. Вот код: browser_update_link = "https://www.google.ru/search?q=" + `Как обновить браузер...

Пример динамического импорта в react приложении
Всем привет. Подскажите где можно посмотреть пример динамического импорта компонентов в реакт приложении. Читал доку вебпака https://webpack.js.org/guides/code-splitting/ не совсем понял как это...

react redux отследить изменение
Добры день. Есть redux в котором есть поле "areaListType" и когда я его меняю, везде, где происходит render значения меняются, но мне надо также отправить изменённое состояние в API. Отправка...

Ошибка при создании React проекта: Maximum call stack size exceeded
Здравствуйте. Я новичок в React. Решил следуя туториалу настроить проект. Сначала запустил команду npm i -g create-react-app Ни одной ошибки не произошло. Далее, запустил команду create-react-app...

Как превратить переданные props в state?
У меня есть react контейнер который ходит по апи за данными. Данные рендерятся на странице и они же прокидываются по средствам props в модальное окно для редактирования вместе с колбеками для полей....

Кто передал в функцию props
Доброго времени суток. Посмотрите, пожалуйста, скрин из консоли. В пропсах там сидят данные. Не могу понять откуда они взялись. Функция withSuspense вызывается в компоненте App в 39-ой строке....

React как сделать анимацию прозрачности при клике?
React как сделать анимацию прозрачности при клике? https://reactcommunity.org/react-transition-group/transition Тут, конечно, целый пример, но я не понял как подгрузить бибилиотеки с анимками....

Работа с DOM в React и на чистом JS
С Днём Победы! Пишут о том что работа React быстрее с DOM, чем на чистом JS, так как он работает с Virtul Dom, а только потом вносит изменения в реальный. Я не могу понять в чём это выражается?...

Компоненты и пропсы
Добрый день! У меня есть массив с названиями животных, это выводится на экран с помощью картинок, я могу отсортировать массив картинок по группам животных - это работает, у меня один стэйт для...

Events.js:167 throw er; // Unhandled 'error' event
В общем, я создал приложение и поставил сверху express https://dev.to/loujaybee/using-create-react-app-with-express Затем я озаботился тем, что файл server.js не обновляется по хот модулю и решил...

Посоветуйте курсы по React JS
Народ, всем привет. Вот недавно начал изучать React JS вот по этим видео: https://www.youtube.com/playlist?list=PLIcAMDxr6tpoShAiU0Nh_nBtg19XWbCql Подскажите, какие материалы изучали лично вы,...

multiple select
Здравствуйте! подскажите, как правильно создать многозначный select в react. Я сделал по-своему, работает правильно, но 'глючит' при выборе-отмене. class FlavorForm extends React.Component {...

Передать json через пропс в другой компонент и вятынуть данные
Доброго времени суток. Подскажите в вопросе. Получаю данный из запроса (JSON), затем пытаюсь передать его в другой компонент через props, но не могу потом вытащить из него значение. ...

Работа с асинхронными функциями
Всем привет, недавно начал учить react и столкнулся с такой проблемой Есть компонент Map в котором 2 метода. Метод getPosition - асинхронный запрос на сервер для определения местоположения...

Не рендерится компонент
Я имею следующий код: import './Form.css' import React, { Component } from 'react' import axios from 'axios' import Comment from "../comment/Comment"; export default class Form extends...

Роутинг React.js
Здравствуйте! Возник вопрос: как работать с многоуровневой маршрутизацией. У меня компонент не отрисовывается, да и я не понял как вообще работать правильно с маршрутизацией. Т.е. если у нас...

Откуда тут массив с Промисами?
Здравствуйте! Скажите пожалуйста, почему вот этот кусок кода мне выдаёт массив промисов вместо массива объектов со свойствами и одним новым свойством, которое я пытаюсь добавить с помощью этого же...

React Хранение переменных при обновлении страницы
Добрый день. Я получаю от сервера token и он необходим мне на каждой "странице", которая обращается к API. Где можно хранить этот token, что бы при нажатие кнопки "Обновить" в браузере он не...

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru