score:1

the this, in your case is referring the window object.

you can try to pass the name as a function value. something like this :

const mydata = [
    {
      id: 1,
      name: "lorem ipsum",
      content: (alt) => (
        <>
          <img
            src="https://images.unsplash.com/photo-1637704758245-ed126909d374?ixlib=rb-1.2.1&ixid=mnwxmja3fdb8mhxlzgl0b3jpywwtzmvlzhwxnhx8fgvufdb8fhx8&auto=format&fit=crop&w=500&q=60"
            alt={alt}
          />
        </>
      )
    }
  ];

const output = mydata.map((x) => (
    <div key={x.id}>
      <p>{x.name} sa</p>
      <p>{x.content(x.name)}</p>
    </div>
  ));

score:1

content is defined inside the object while the object is being defined. so there is no name yet when content is being defined. only after the assignment does name exist. you're referencing something that doesn't exist yet. so instead you can create a function that will be called at a later point after the object is defined and then the name can be referenced as shown below.

export default function app() {
const mydata = [
    {
      id: 1,
      name: "lorem ipsum",
      content: function(){
        return (
        <>
          <img
            src="https://images.unsplash.com/photo-1637704758245-ed126909d374?ixlib=rb-1.2.1&ixid=mnwxmja3fdb8mhxlzgl0b3jpywwtzmvlzhwxnhx8fgvufdb8fhx8&auto=format&fit=crop&w=500&q=60"
            alt={this.name}
          />
        </>
      )
        }
    }
  ];

 const output = mydata.map((x) => (
         <>
           <div key={x.id}>
             <p>{x.name} sa</p>
             <p>{x.content()}</p>
           </div>
         </>
  ));

  return <div classname="app">{output}</div>;
}

score:1

you can replace the object in your mydata array with a self executing function like this:

 const mydata = [
     function(){
        const entry = {
           id: 1,
           name: "lorem ipsum",
        }
        return {
          ...entry,
          content: (
             <>
               <img
                 src="your image source"
                 alt={entry.name}
               />
             </>
           )
        }
     }()
  ];


Related Query

More Query from same tag