Тигран Абрамян

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

пример создания и использования
const [ text, setText ] = React.useState('Text1');

<h3 className='text'>{text}</h3>

если нужно изменять просто напишите
setText('новый текст');

да и не помешало бы чтения документации секции хуков

если не используются какие-нибудь хуки например useStateили useEffect то можно и не подключать

https://jsfiddle.net/xtewmfL5/

Очень странным мне кажется такой подход.

Не странно, не волнуйтесь В реакте используется именно такой подход.

const [value, setValue] = useState('');
const [text, setText] = useState('');

const handleChange = (e) => setValue(e.target.value);
const handleClick = () => setText(value);

<p>{text}</p>

<input type="text" onChange={e => setForm({ ...form, login: e.target.value })} />
<input type="text" onChange={e => setForm({ ...form, password: e.target.value })} />

import React, { useState } from 'react';

const SelectTaxon = (props) => {
  const [isShown, setIsShown] = useState(true);

  const toggleFIeldset = () => setIsShown(!isShown);

  let selectTaxonCheckbox = props.selectTaxonData.map((input) => (
    <InputCheckbox
      id={input.id}
      htmlFor={input.htmlFor}
      title={input.title} />
  ))


  return (
    <div className={styles.taxon}>
      <h2 className={styles.h2} onClick={toggleFIeldset}>Назва Таксону</h2>
      {isShown &&
        <fieldset className={styles.fieldset + ' ' + styles.fieldsetActive}>
          <legend className={styles.legend}>Охоронний статус</legend>
          {selectTaxonCheckbox}
          <legend className={styles.legend + ' ' + styles.legendTaxon}>
            Джерело даних
          </legend>
        </fieldset>
      }
    </div>
  )
}

У вас в файле AnswersList/AnswersList.js неправилно импортирван реакт
Правильнее
import React from 'react';

Без разницы сколько переменных, используем useState бесконечное количество раз.

const [num, setNum] = useState(0);
const [text, setText] = useState('no');
const [textUpper, setТextUpper] = useState('HELLO');

const changeState = () => {
  setNum(num + 1);
  setText('yes');
  setТextUpper('BYE');
}

Либо можем создать обьект

const [data, setData] = useState({
  num: 0,
  text: 'no',
  textUpper: 'HELLO'
});

Либо можем использовать useReducer.

Для таких целей правильнее использовать приватный роут.

import React from 'react';
import { Route, Redirect, useLocation } from 'react-router-dom';

export const PrivateRoute = (props) => {
  const token = localStorage.getItem("myToken");
  const location = useLocation();

  if (token) {
    return <Route {...props} />
  }

  return (
    <Redirect to={{ pathname: '/', state: { from: location } }} />
  );
};

// Use Private Route
import { PrivateRoute } from './PrivateRoute';
import { Home } from './Home';

<PrivateRoute path="/home">
  <Home />
</PrivateRoute>

Как лучше писать на React? Используя React Hooks или классы?

Допустим Logo(js\css) перекинуть в папку Logo и тд

Так и нужно.

В свое время читала на хабре что некоторые разработчики создают одну папку Header, и сваливают туда все компоненты

Во время создания реакта в 2013?

Первый способ более структурированный.

import React, { useEffect } from 'react';

export default function GetContent() {

  const GetData = () =>  {
    ...
  };

  useEffect(() => {
		GetData().then(res => console.log(res));
  }, []);

  return (
    <div>
      	
    </div>
  )
}

Первый способ наиболее правильный.

return (
   {
      this.state.table.map(row => {
         return <TableRow row={row}/>
      })
   }
)
function TableRow(props) {
   return(
      <tr>
         props.row.map(cell => {
             <td><TableCell /></td>
         })
      </tr>
   )
}

npx create-react-app react-app

then и catch относятся не к React а к JS, так что соответственно такие методы есть.

fetchData = () => {
  fetch(`https://........`)
    .then((response) => response.json())
    .then((data) => {
      const groupedData = data.group;
      this.setState({
        data: groupedData,
        car: Object.keys(groupedData)[0]
      }, this.filter);
    })
    .catch(() => {
      console.log("404 Not Found");
    });
};

Это нормально, смотря как вам хочется.