Как использовать данные из API и выводить их с помощью React?

Question

[Cyberial Syntwaiser]

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

import React                          from 'react';
import HeaderLogo,   {ReactComponent as Logo} from '../../../img/logo/logo.svg';
import HeaderLogout, {ReactComponent as Logout} from '../../../img/icons/sign-out.svg';

class MainHeader extends React.Component {
    constructor(props) {
        super(props);
            this.state = {
                user_name: '',
                user_surname: '',
                user_photo: ''
            }
        fetch('some api')
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                console.log(data);
                if (data.success) {
                        this.setState({
                            user_name: data.user.name,
                            user_surname: data.user.email,
                            user_photo: data.user.photo
                        });
                } else {
                    this.setState({
                        user_name: 'Sign in'
                    })
                }
            })
    }
    render() {
        return (
            <header className='Main-header'>
                <div className='Main-header--items container flex'>

                    <div className='Main-header--logo'>
                        <a href='#'><img src={HeaderLogo}></img></a>
                    </div>
                

                    <div className='Main-header--nav' id='burger-nav'>
                        <nav>
                            <ul className='flex'>
                                <li><a href='#'>About me</a></li>
                                <li><a href='#'>Relationships</a></li>
                                <li><a href='#'>Requirements</a></li>
                                <li><a href='#'>Users</a></li>
                                <li><a href='#'>Sign Up</a></li>
                            </ul>
                        </nav>
                    </div>
                
                    <div className='User-info flex'>
                        <div className='User-info--data'>
                            <p className='User-info--name'>{this.state.user_name}</p>
                            <p className='User-info--email'>{this.state.user_surname}</p>
                        </div>
                        <div className='User-minimizer-photo'>
                            <img src={this.state.user_photo}></img>
                        </div>
                        <div className='User-logout'>
                            <a href='#'><Logout/></a>
                        </div>
                    </div>

                    <div className='toggle-menu-burger' id='open-button'>
                        <div className='items-burger'>
                            <span className='bm-burger-button'></span>
                            <span className='bm-burger-button'></span>
                            <span className='bm-burger-button'></span>
                            <button>Open Menu</button>
                        </div>
                    </div>

                </div>
            </header>

        )
    }
}
export default MainHeader

Мне нужно показать при нажатии на гамбургер тоже самое, но без пары div.
Как взять нужные JSX html теги? В переменные закинуть и вызывать ?
Или создать новый компонент в котором описать тот же JSX ?
Но нужно передать туда this.state которое подгружает из API данные пользователя, но если так делать в другом компоненте то this.state.* не показывает данные...
Описал как смог, если что либо не понятно я готов ответить! Спасибо за помощь

Comments

[Шохрух Шаймардонов]

Я бы как такой же ленивый разраб сделал изначально компонент на минималках и его обёртывал нужными дивами чем убирал от готового компонента убирал див. Так вы переиспользуете готовый компонент, что и подразумевает реакт

Answer 1

[Alexander Dozmorov]

Я бы порекомендовал поработать немного с архитектурой.
Необходимо разделять компоненты и логику запросов.
Старайтесь не использовать относительные пути вверх по дереву.
Данные о юзере лучше хранить в сторе, а не в стейте. (redux)
Также, было бы хорошо использовать более современный синтаксис, посмотрите на хуки реакта, они не страшные.

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

Comments

[Cyberial Syntwaiser]

Тоесть если я хочу брать данные, то лучше лишь с redux*om?
Чтож, сейчас будем пыхтеть дальше :)
Спасибо

[Alexander Dozmorov]

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

Например создайте в корне папку modules, а в ней auth, в которой будут файлы reducer, actions, selectors, constants, utils, по необходимости.

[Cyberial Syntwaiser]

Alexander Dozmorov, Спасибо, а как это загуглить? Я пытался найти реальное видео применения реакта на написание сайта, но натыкался лишь на приложения не похожих на обычные сайты

[Alexander Dozmorov]

Зачем видео? Смотрите чужие репозитории и документацию на гитхабе)

[Cyberial Syntwaiser]

Alexander Dozmorov, Точнооо! Ну я голова...
А вы случайно не можете скинуть какую-то годноту? Вот чтоб я вьехал в реакт как нужно, и написал это тестовое :):):) Позязя )))

[Alexander Dozmorov]

Cyberial Syntwaiser, скину свое, оно не фонтан, но может помочь на первых порах
https://github.com/Dozalex/Travelpayouts_test

ps тут правда не используются реактовские хуки, но можно считать это маленьким испытанием, разобраться в них самому)

[Cyberial Syntwaiser]

Alexander Dozmorov, Интересно, сейчас по делам сгоняю и как посмотрю отпишусь ))

[Cyberial Syntwaiser]

Cyberial Syntwaiser, Посмотрел минут 20, запустил на локал хосте, но на счет использование хуков так не понял откуда они вызываются, скорее всего ты их прокидываешь как-то в свойства реакта, а потом их где-то берешь, но я не нашел (мои навыки в реакте и как программиста в целом еще плохи) но это единственное что я пока могу предположить, работа интересна и я могу перебрать много опыта! Спасибо!
В идеале если бы я мог переодически просить помощь у таких как ты, я бы куда быстрее стал *хорошим* разрабом и нашел работу :(