Почему возвращает Nan?

Yes It's matrik, откуда данные приходят, там и пересчитывать нужно. Или сам пересчитывая при итерации map

Почему возвращает Nan?

В discountPrice у тебя математические операции строки и числа. Там цифры и быть не может, вот поэтому и NaN (not a number)
Сам поле пересчитывай исходя из этой формулы перед if

Как получить данные с формы, которая находится в цикле?

Если у тебя форма в цикле, то должна быть уникальная идентификация форм, а у тебя получается все формы с id=form плюс интпуты тоже с одинаковым id.

$(document).ready(function () {
        $('form').submit(function(e) {
          const $submitedForm = $(this)
          e.preventDefault();
          $.ajax({
              url: './php/send.php',
              type: 'GET',
              data: $submitedForm.serialize(),
              success: function(response) {
                  $('.filter_data').html(response);
              }            
          });
        });
 });

Можно ли использовать современный 1c битрикс как headless cms?

Алексей Фищук, А чем кардинально vue отличается от react. Ничем. Если не умеет Битрикс отправлять данные по json, то никто не мешает это сделать самому. Я не спец в Битрикс, но все решается, вопрос в целесообразности. Json это всего-навсего формат данных. Битрикс написан на php, а php умеет работать с json. - json_encode, json_decode. Создай эндпоинты и обрабатывай.

Как правильно реализовать статус online/offline?

Я делал так.
1. Когда пользователь заходит на сайт происходит подключение к сокету с передачей id пользователя. Сервер обрабатывает подключение, находит пользователя в бд и сразу же пишет в бд online = true.
2. Как только происходит отключение от сокета, сервер знает id пользователя и id сокета. Сервер проверяет, подключен ли ещё сокет с таким id пользователя, если есть ничего не происходит, если нет, то через задержку в n минут ставит в бд online = false и last_time_online = текущее время.

Как интегрировать recaptcha enterprise в React?

GaserV, Все там работает. Нужно правильно использовать.

Где-то в компоненте:

const [ reCaptchaState, setReCaptchaState ] = useState( {
        callback: 'not fired',
        value: false,
        load: false,
        expired: false,
        recaptchaLoaded: false,
        siteKey: getCaptchaSiteKey(),
        delay: 300
    } )
    const reCaptchaRef = useRef();
    const reCaptchaHandler = {
        onChange: ( e ) => {
            console.log( 'reCaptcha onChange', e );
        },
        asyncScriptOnLoad: ( e ) => {
            setReCaptchaState( ( prev ) => {
                return {
                    ...prev,
                    callback: "called!",
                    recaptchaLoaded: true,
                }
            } )
            console.log( "scriptLoad - reCaptcha Ref-", reCaptchaRef );
            console.log( "scriptLoad - reCaptcha e", e );
        },
        execute: () => {
            // reCaptchaRef.current.execute();
        },
        executeAsync: ( submitFormCallback ) => {
            reCaptchaRef.current.executeAsync()
                .then( value => {
                    if ( value ){
                        setReCaptchaState( ( prev ) => {
                            return {
                                ...prev,
                                value: value
                            }
                        } )
                        submitFormCallback( value )
                        console.log( "executeAsync promise - Captcha value:", value );
                    } //
                    else{
                        console.log( "executeAsync promise error:", value );
                    }
                } )
                .catch( err => {
                    console.log( "executeAsync error", err );
                } );
        },
        onExpired: ( e ) => {
            setReCaptchaState( ( prev ) => {
                return {
                    ...prev,
                    expired: true
                }
            } )
            console.log( 'reCaptcha expire ' );
        },
        onErrored: ( e ) => {
            setReCaptchaState( ( prev ) => {
                return {
                    ...prev,
                    error: true
                }
            } )
            console.log( 'reCaptcha error' );
        }
    }

...

useEffect( () => {
        let isMounted = true
        setTimeout( () => {
            if ( isMounted ){
                setReCaptchaState( ( prev ) => {
                    return {
                        ...prev,
                        load: true
                    }
                } )
            }
        }, reCaptchaState.delay )
        return () => {
            isMounted = false
        }
    }, [] )

...

{ !reCaptchaState.recaptchaLoaded && <Preloader/> }
...

{ reCaptchaState.load &&
            <div className='recaptchaContainer'>
                <ReCAPTCHA
                    ref={ reCaptchaRef }
                    theme="dark"
                    size="invisible"
                    sitekey={ reCaptchaState.siteKey }
                    onChange={ reCaptchaHandler.onChange }
                    onExpired={ reCaptchaHandler.onExpired }
                    onErrored={ reCaptchaHandler.onErrored }
                    asyncScriptOnLoad={ reCaptchaHandler.asyncScriptOnLoad }
                />
            </div>
            }

Пишу с мобилы, могут быть ошибки в скобках.
Это вырезано с рабочего проекта. Так что все работает.

Почему происходит рендер не ожидая ответа от сервера?

kablihin,
И вот как нужно использовать экшен

export const fetchDataNew = (id:string) =>{
    return async(dispatch: Dispatch<DataActionNew>)=>{
        try {
            dispatch({type:DataActionTypes.FETCH_DATA})
            const url = `http://localhost:5000/api/new/${id}`
            const response = await axios.get(url)
            dispatch({type:DataActionTypes.FETCH_DATA_SUCCESS,payload:response.data})
        } catch (error) {
            return dispatch({
                type:DataActionTypes.FETCH_DATA_ERROR, 
                payload:"Произошла ошибка загрузки данных"})
        }
    }
}

Это пример, привиди к своему виду. С try и catch

export function foo(  ) { 
     return dispatch => { 
  API().then( responseData => { 
            dispatch( ... ) 
         } ).catch( errorData => { 
             dispatch( ... ) 
         } ) 
     } 
 }

В чем проблема, при попытке удалить компонент?

Максимально странная логика. Ну да ладно.

1. Мутировать Стейт нужно основываясь на предыдущем его значении или же сразу новое писать

const addOneComponent = (newComponent) => {
    setComponents(prev => (
    const newItem = {
         id: prev.length+1,
         Component: newComponent
         }

    return [...prev,  newItem]
)};

2.

{components.map((item => (
            <item.Component key={item.id} id={item.id} onRemove={removeComponent} />
          ))}

3.

function removeComponent(id) {
    setComponents(components.filter((p) => p.id !== id);
}

3. Кнопка удаления, я так понимаю находится в компоненте.

<img
            src={removeComponent}
            onClick={()=>props.onRemove(props.id)}
          />

Собери все в кучу. Т.к. всей логики я не вижу. И будет работать.
И читай мат.часть.

Я может где-то ошибся в скобках. Пишу с мобилы. Так что проверяй.

Как лучше скрыть элемент в react?

tron21,
Все зависит от структуры.
Если на одном уровне вложенности, то можно в родительском использовать хук и пропсом передать в дочерний.
Можно через redux реализовать сохранение значений ширины и в нужных компонентах извлекать из стора.
Тут вариантов много.
Хук можно улучшить, например смотреть есть ли уже слушатель с инстенсом нужной функции, если нет, то навестить. Я дал идею, дальше можно капать в этом направлении.

Как лучше скрыть элемент в react?

tron21,
Да все верно.
Это легко проверить
Рендер будет если мы смотрим относительно реакта, элемент появится в дом, но стилями будет скрыт.

А при условном рендере компонента такого не будет.

На счёт хука, да переиспользуемый useWindowWidth или как то так, на ваше усмотрение.

import React, { useLayoutEffect, useState } from 'react'; 
  
 export const useWindowSize = () => { 
     const [ size, setSize ] = useState( { 
         innerWidth: 0, 
         innerHeight: 0, 
         outerWidth: 0, 
         outerHeight: 0 
     } ); 
     useLayoutEffect( () => { 
         const updateSize = () => { 
             setSize( () => { 
                 return { 
                     innerWidth: window.innerWidth, 
                     innerHeight: window.innerHeight, 
                     outerWidth: window.outerWidth, 
                     outerHeight: window.outerHeight, 
                 } 
             } ); 
         } 
         window.addEventListener( 'resize', updateSize ); 
         updateSize(); 
         return () => window.removeEventListener( 'resize', updateSize ); 
     }, [] ); 
     return size; 
 }

Плюс с таким подходом можно и вовсе структуру приложения менять, чего не сделать с css

Где лучше хранить signalr соединение в React приложении?

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

Как выполнить функции после создания категории в WP?

Благодарчик

Как вывести валидный HTML из PHP?

Тарас Паращук, В целом не совсем ясно, в чем у тебя беда. Валидацию не проходит из-за того, что не сформировано тело html документа

Как вывести валидный HTML из PHP?

Весь свой вывод запихни в body

<!DOCTYPE html>
<html>

<head>
    <title></title>

    <style></style>
</head>

<body>

<!-- Сюда -->

</body>

</html>

Как вывести валидный HTML из PHP?

Тарас Паращук, Читать такой код как думаешь удобно?

Как вывести валидный HTML из PHP?

Ошибка не в самом выводе вышеуказанного кода, а в целом в формировании документа

Как вывести валидный HTML из PHP?

Во первых добавь
<!DOCTYPE html>
Дай исходник самого script3.php

Как в динамике отследить пресечения элементов?

Спасибо, за наводку

Почему не работает ajax?

Или тело функции вынеси за функцию либо сделай вызов функции send()