React img is dangerously set inner html?

Question

Here is some code I have and is giving me an error. I have no idea what the error means and why it's not displaying.

import React from "react";
import "./Card.css";

export default function Card() {
  return (
    <div class='card'>
        <img src='img_avatar.png' alt="Avatar" style='width:100%'> </img>
        <div class='container'>
            <h4><b>Devware</b></h4>
            <p>Description</p>
        </div>
    </div>
  )
}

I'm getting the following error:

Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

What does this mean?

Answer 1

This is because you have a space between open <img> and closing </img> tags which is invalid, also React style prop should be an object and class should be className as class is a reserved javascript word so your Card component should be like this

export default function Card() {
    return (
        <div className='card'>
            <img src='img_avatar.png' alt="Avatar" style={{ width: '100%' }} />
            <div className='container'>
                <h4><b>Devware</b></h4>
                <p>Description</p>
            </div>
        </div>
    )
}