Переключатель режимов отображения Node + React

krvsa

, ответ действительно лежал на поверхности, но не в том русле. Согласен, моя ошибка заключается в том, что я не предоставил больше необходимой информации и больше вписал ненужной, но в Вашем случае переключатель "вшит" в самый верхний компонент "App", что не совсем верно с точки зрения компоновки в React-приложениях, ведь туда, по сути, вшивается вся страница, а родительских компонентов по сравнению с данным переключателем много, куда можно было бы его впихнуть. Так как я больше специализируюсь на бэкенд-разработке, мне было сложно ориентироваться во всех компонентах и я в последнюю очередь заметил компонент "Contacts", где идет вывод формы. Туда я и запихнул свой переключатель с условием на переключение вывода необходимых компонентов.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import React, { useEffect, useState } from "react";
import { useTranslation } from 'react-i18next';
import Form from "../Form";
import './contacts-style.css'
import TableFormSwitcher from "../TableFormSwitcher";
import DataTable from "../DataTable";
 
const Contacts = () => {
  const {t, i18n} = useTranslation()
  const [displayTable, setDisplayTable] = useState(false);
  const [animateElements, setAnimateElements] = useState(true);
 
  const handleToggleDisplay = () => {
    setDisplayTable(!displayTable);
  };
 
  const handleAnimationEnd = () => {
    setAnimateElements(false);
  };
 
 
  return (
    
      <section className="page__section contact-section">
        <h2 className="page__subtitle section-subtitle contact-subtitle element-animation">
          {t('post.header')}
        
        <TableFormSwitcher handleToggleDisplay={handleToggleDisplay} displayForm={!displayTable} />
        {displayTable ? <DataTable /> :  ( <Form onAnimationEnd={handleAnimationEnd} animateElements={animateElements} /> )}      
        </section>
    
  );
};
 
export default Contacts;

Оставалось дело за малым - найти стили, которые принимают свойство "Opacity: 0", из-за чего и не показывается форма. Опять-таки в силу невнимательности и отсутствия обширного опыта во фронтенд-разработке я не лез во всякие CSS-файлы, поэтому сразу не заметил, что есть один такой, в котором описано данное свойство в классе ".element-animate", которое используется во всех инпутах формы. Поменял значения свойства на 1 и переключатель заработал как надо. Как мне подсказали пользователи с другого форума - код и без того был рабочим и надо было сразу копаться в стилях, просто я решил выделить больше времени на изучение остальных компонентов и нашел более удобное место для размещения переключателя.

Остаются только вопросы насчет стилей: правильно ли с точки зрения фронтенд-разработки ставить "вшивать" значение 1 для свойства "opacity" для подобных классов и удовлетворяет ли требованиям использование JQuery для их изменения с использованием JS?