Search code examples
reactjsimagereact-functional-component

Image is not shown in nested curly braces in react js functional component

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

I am calling an API and then I set the value of x.It's working fine. Add is visible only when the value is not ''. But the image 'add' is not visible. I don't get any error while compiling. The image add is imported like: import add from './add.png'

Solution 
  • { x !== '' && (
     <div>
          <img src={add} alt="Add" onClick={() => Sety(y + 1)} onKeyDown={() => Sety(y + 1)} />
        Add
     </div>
        )
}

    Enclosing Image and text inside div tag worked for me.