How to consume data from API and display it with React?

Question

HTML

Good time! I'm doing a test task for the site, and I need to display the main menu not only in the navigation, but also when you click on *hamburger* so that the menu also opens on the left side of the page but without some divs.
Let's say I'm a very lazy programmer, and I want to use a JSX component that has this code

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

I need to show the same thing when clicking on a hamburger, but without a pair of divs.
How to get the required JSX html tags? Throw in variables and call?
Or create a new component in which to describe the same JSX ?
But you need to pass this.state there, which loads the user data from the API, but if you do this in another component, then this.state.* does not show the data ...
I described it as best I could, if something is not clear, I'm ready to answer! thanks for the help

Answer 1

I would recommend to work a bit with the architecture.
Separate components and query logic.
Avoid using relative paths up the tree.
It is better to store user data in the store, and not in the state. (redux)
Also, it would be nice to use a more modern syntax, look at react hooks, they're not terrible.
Well, on the question itself, when the data request logic is rendered, it will be a regular component into which you can throw the isBurger prop and display blocks depending on its value.