Why do I get this error in the return function?

Question

This is my code:

    export default function Mio() {
      const app = document.getElementById("app");
      const Avatar = (params) => {
        const src = `https://randomuser.me/api/portraits/women/${params.id}.jpg`;
        return `
        <div>
          </br>
          <picture>
            <img src="${src}" />
            ${params.name}
          </picture>
        </div>
        `;
      };
      return (
        <div class="box01" style="background:rgba(0, 0, 0, 1)">
        <div class="box02" style="background:rgba(50, 255, 0, 0.70)">
          <center><h1>Desarrolladoras</h1></center>
          <center><h2>Android</h2></center>
          <center>
            Avatar({ id: 1, name: "Andrea" })
            Avatar({ id: 2, name: "Miluska" })
          </center>
        </div>
        <div class="box03" style="background:rgba(50, 0, 255, 0.70)">
          <center><h1>Desarrolladoras</h1></center>
          <center><h2>iOS</h2></center>
          <center>
            Avatar({ id: 3, name: "Raida" })
            Avatar({ id: 4, name: "Tania" })
          </center>
        </div>
      </div>
      );
    }

That shows errors. But when I run this code, replacing return function with this:

    app.innerHTML = `
        <div class="box01" style="background:rgba(0, 0, 0, 1)">
        <div class="box02" style="background:rgba(50, 255, 0, 0.70)">
          <center><h1>Desarrolladoras</h1></center>
          <center><h2>Android</h2></center>
          <center>` +
            Avatar({ id: 1, name: "Andrea" }) +
            Avatar({ id: 2, name: "Miluska" }) +
          `</center>
        </div>
        <div class="box03" style="background:rgba(50, 0, 255, 0.70)">
          <center><h1>Desarrolladoras</h1></center>
          <center><h2>iOS</h2></center>
          <center>` +
            Avatar({ id: 3, name: "Raida" }) +
            Avatar({ id: 4, name: "Tania" }) +
            `</center>
        </div>
      </div>
      `;

I don't get an error, but I want it to be able to work with the return function.

Answer 1

Your JSX component is not formatted the right way.

You can't just add a function into JSX, you have to use the JSX syntax for your Avatar components provided you want to render that HTML.

So Avatar({ id: 1, name: "Andrea" }) becomes <Avatar id={1} name="Andrea" /> etc

In addition to that I made changes to your Avatar component so it returns actual JSX instead of a string like you had and fixed up some other errors you had on the component like class -> className and passing an object to style .

So your code would look like this:

export default function Mio() {
  // const app = document.getElementById('app'); // unused-var
  const Avatar = (params) => {
    const src = `https://randomuser.me/api/portraits/women/${params.id}.jpg`;
    return (
        <div>
          <br/>
          <picture>
            <img src={src} />
            ${params.name}
          </picture>
        </div>
     );
  };

  return (
    <div className="box01" style={{ background: 'rgba(0, 0, 0, 1)' }}>
      <div className="box02" style={{ background: 'rgba(50, 255, 0, 0.70)' }}>
        <center>
          <h1>Desarrolladoras</h1>
        </center>
        <center>
          <h2>Android</h2>
        </center>
        <center>
          <Avatar id={1} name="Andrea" />
          <Avatar id={2} name="Miluska" />
        </center>
      </div>
      <div className="box03" style={{ background: 'rgba(50, 0, 255, 0.70)' }}>
        <center>
          <h1>Desarrolladoras</h1>
        </center>
        <center>
          <h2>iOS</h2>
        </center>
        <center>
          <Avatar id={3} name="Raida" />
          <Avatar id={4} name="Tania" />
        </center>
      </div>
    </div>
  );
}