Кнопка с иконками

[yanVolskiy]

Всем привет, относительно недавно изучаю ДжаваСкрипт и сейчас выполняю тестовое задание используя React js. Столкнулся с проблемой передачи картинки по импорту в кнопку. Код выглядит так:

import arrowDown from '../../../media/icons/arrow-down.svg';
import arrowUp from '../../../media/icons/arrow-up.svg';


<Button className={classes.reportBtn} onClick={handleClick}>
<img className={classes.groupIcon} src={group} alt="group icon" />
{open ? 'Hide report' : 'Show report'}
</Button>


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

[Malleys]

yanVolskiy, сначала импортируйте нужные компоненты...

import { ReactComponent as ArrowUp } from "../../../media/icons/arrow-up.svg";
import { ReactComponent as ArrowDown } from "../../../media/icons/arrow-down.svg";

...а затем используйте их в зависимости от значения open...

<Button className={classes.reportBtn} onClick={ handleClick }>
     { React.createElement(open ? ArrowUp : ArrowDown, { className: classes.groupIcon }) }
     { open ? 'Hide report' : 'Show report' }
</Button>

[yanVolskiy]

Спасибо друг! Сделал немножко по другому, но ваш вариант очень помог

<Button className={classes.reportBtn} onClick={handleClick}>
{open ? 'Show report' : 'Hide report'}
{open ? (
<ArrowDown className={classes.arrowIcon} />
) : (
<ArrowUp className={classes.arrowIcon} />
)}
</Button>