Изображение не отображается во вложенных фигурных скобках в функциональном компоненте react js

#reactjs #image #react-functional-component

Вопрос:

 function Adding()
{
 const [y, Sety] = useState('');
return(
<>
.
.
{ x !== '' amp;amp; (
          <img src={add} alt="Add" onClick={() => Sety(y   1)} onKeyDown={() => Sety(y   1)} />, 'Add'
        )
}
.
.
</>
);
}
 

Я вызываю API, а затем устанавливаю значение x.It все работает нормально. Добавить отображается только в том случае, если значение не «. Но изображение «добавить» не видно.
Я не получаю никаких ошибок при компиляции. Добавление изображения импортируется следующим образом:
import add from './add.png'

Ответ №1:

 { x !== '' amp;amp; (
     <div>
          <img src={add} alt="Add" onClick={() => Sety(y   1)} onKeyDown={() => Sety(y   1)} />
        Add
     </div>
        )
}
 

Включение изображения и текста в тег div сработало для меня.