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

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

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW