How to access the value inside array of object within that array-CodePudding

I want to access the value of name and put it on image alt tag, something like this alt={this.name}. But i got an error on JSX expression.

Check this sandbox here.

See the code below:

export default function App() {
  const myData = [
        {
           id: 1,
           name: "Lorem Ipsum",
           content: (
             <>
               <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>;
}

CodePudding user response：

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>;
}

CodePudding user response：

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>
  ));

CodePudding user response：

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}
               />
             </>
           )
        }
     }()
  ];