Как вызвать компонент в функции?

Question

[Haaaaz]

Есть компонент Hi

import React from 'react';

const Hi = () => {
    return (
        <div>
            <h1>hi</h1>
        </div>
    );
};

export default Hi;

Есть компонент Main, в котором я хочу по нажатию на кнопку вызывать функцию, которая будет отображать компонент.

import React from 'react';
import Hi from './Hi'

function display(){
    return <Hi/>
}

const Main = () => {
    return (
        <div>
            <button onClick={display}>отобразить</button>
        </div>
    );
};

export default Main;

Но это не работает. Компонент Hi не отображается

Answer 1

[Александр Смирнов]

Я думаю, что вам нужно поглубже изучить React и его базовые концепции. Особенно, понять как пользоваться стейтом компонента. Иногда документация кажется сильно сухой, поэтому Youtube в помощь)

Фрагмент с правками

import React, { useState } from 'react';
import Hi from './Hi'

function display(){
    return <Hi/>
}

export const Main = () => {
    const [isHiVisible, setHiVisible] = useState(false);
    const onClick = () => {
        setHiVisible((prev) => !prev);
    }
    return (
        <div>
            <button onClick={onClick}>отобразить</button>
            {isHiVisible &&
                <Hi/>
            }
        </div>
    );
};

Comments

[Владимир]

А для чего вы оставили в коде

function display(){
    return <Hi/>
}

в этом куске есть какая то польза ?

[Александр Смирнов]

Владимир, просто забыл удалить)

Answer 2

[Владимир]

Все очень просто
Сначала читаешь вот это
https://reactjs.org/tutorial/tutorial.html
Потом вот это
https://reactjs.org/docs/getting-started.html
А то что сейчас написал, выкидываешь в мусорку и не вспоминаешь.

Comments

[Haaaaz]

Смысл отвечать, если ты не можешь помочь, а только отвечаешь "выкидывай в мусорку, что ты сейчас написал"?

[Владимир]

Haaaaz, Не я один написал что вам нужно пройти туториал.
По вашему коду не видно что вы хотябы приблизительно знакомы с React
Вы можете поогрызаться, но чтение туториала у вас займет максимум один вечер, а пользы будет на месяцы вперед.