Алексей Уколов

Повангую: переменная name не определена.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

Документация

Вот так правильно:

this.setState(
  (state) => ({test: !state.test}),
  () => console.log(this.state.test)
);

Есть и такая, но, скорее всего, вы видели вот это: this.state = {...props}

Тогда не нужно будет писать this.state.props.foo, можно будет обращаться через this.props.foo.

На мой взгляд, это плохая практика и так можно делать только в некоторых очень ограниченных сценариях.

Изменять state компонента по клику на кнопку.

#какойвопростакойиответ

как теперь передать данные в эти компоненты из него?

<Route exact path='/component' render={() => <myComponent prop={value}/>} />

как сделать так, чтобы при загрузке заходило сразу на страницу '/component', а не на '/'?

<Redirect exact from='/' to='/component'/>

Я понимаю, что это удобно, когда за тебя думают другие, но вы попробуйте всё же документацию почитать: https://reacttraining.com/react-router/
Я сам только вчера начал с этой библиотекой работать и, как видите, вполне смог ответить на эти вопросы.

Написано же - для файла не найдены тесты. А не найдены они потому, что вы их удалили.

var counter = 0;

var post = counter++;
console.log(post, counter); // 0, 1

var pre = ++counter;
console.log(pre, counter); // 2, 2

Но такой код вообще неправилен, должно быть так:

this.setState((prevState) => ({counter: prevState.counter + 1}))

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

На данный момент я знаю, что выводить данные можно в формате либо только года , либо только месяца, либо только дни.

Выводить можно в любом формате, который понимает moment.js. Там есть всё, что душе угодно: https://momentjs.com/docs/#/displaying/format/.

В зависимости от кол-ва дней.

https://momentjs.com/docs/#/displaying/difference/

Есть ли метод, который делает такое ?

Нет, но в javascript есть условные операторы. Вам нужен такой: if () {}

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

Сравнивать позицию скролла и этого элемента на странице. В чём вопрос-то конкретно?

Допустим скролл можно слушать так:

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

Лучше для этого использовать Intersection Observer там, где он доступен.

1. Скорее нет, чем да. React-native не умеет рендерить html. Есть пакеты, которые добавляют такую функциональность, но на самом деле они просто делают так, чтобы рендер не ронял билд - привычной функциональности связанной с html-элементами не будет.

Со стилями тоже есть свои особенности - react-native реализует многое из CSS, но кое-чего привычного в нём нет, а то, что есть, иногда работает не так, как ожидается.

Словом, учитывая повышенные требования к универсальности UI kit, разумнее его воссоздать в react-native.

2. Можно. Нужно ли - решайте самостоятельно. Для начала я бы на вашем месте дублировал логику, делал адекватную архитектуру внутри экосистемы react-native, а когда поймёте как там всё устроено, выносите общую логику в пакеты и переиспользуйте.

Разом все эти сообщения обычно и не рендерятся - отрисовывается то, что на экране и немного сверху и снизу. При скролле контейнеры переиспользуются и в DOM элементов не так много. Называется виртуальный список, для каждого указанного фреймворка есть реализации.

Стоит ли этот массив, который я получаю, сохранять в state?

Конечно.

Нормально ли state передавать как props компоненту?

Непонятен вопрос.

Правильно ли делать так, как на картинке?

Неправильно в state хранить вёрстку (строки 20-27). Остальное нормально.

https://flow.org/en/docs/react/components/

Сейчас вы в рендере сразу вызываете removeEducationDiv не дожидаясь никаких нажатий (ещё и передаёте туда неправильный аргумент). Должно быть так:

<RemoveButton removeSection={() => removeEducationDiv(n)}/>}

Ну и в компоненте RemoveButton та же ошибка (там вообще никакие аргументы не нужны).

как получить доступ к самой ячейке, чтобы изменить ей класс

Никак не надо получать, все классы вы должны навешивать в render() на основе данных, в этом вся суть Реакта. В обработчике вы изменяете state, автоматически вызывается render(), в DOM выгружается новое состояние. Вы работаете с данными, React работает с DOM.

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

class Home extends Component{
    state = {items: []};

    componentWillMount(){
        axios.get('/api/test-thema')
            .then(response => this.setState({item: Object.values(response.data)}));
    }

    render(){
        const { user } = this.props;
        return(
            <div>
                <Header/>
                <h1>Добро пожаловать</h1>
                <div>ФИО: {user.name}</div>
                <div>Должность: </div>
                
                <h3>Доступные тесты: </h3>
                <ul>
                    {this.state.items.map((item) => (
                        <li key={item.id}><Link to='/test/'+{item.id}>{item.name}</Link></li>
                    ))}
                </ul>
                <h3>Доступные тренинги: </h3>
            </div>
        );
    }
}

Корректно ли такая операция?

Будет ли она работать? Да, будет. Правильна ли она с точки зрения Реакта? Скорее всего, нет. Смысл Ректа в том, чтобы вы манипулировали объектом состояния, а он уже строил нужный DOM сам.

К какому DOM'у я обращаюсь, виртуальному?

К обычному.

payload: {value} // payload: {value: 'foo'}
vs
payload: value // payload: 'foo'

Новая нотация в ECMAScript 2015