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

Question

Update:

Basically i want the same output but i restructured the content. I'm not sure if your answers are still up for that.

Please check my sandbox feel free to fork it here: https://codesandbox.io/s/get-the-property-value-forked-hutww

So on ContentData.js i want my image alt tag to be dynamic and pull the content of it from key name it something like this alt={this.name} and it will generate to alt="My alt tags"

See the codes below:

Content.js

import React, { Component } from "react";
import mainListsItems from "./ContentData";

class Content extends Component {
  render() {
    const myContent = mainListsItems.map((lists, k) => (
      <>
        <div key={k}>{lists.text}</div>
        {lists.mainContent.map((subcontent, j) => {
          return <div key={j}>{subcontent.contentAll}</div>;
        })}
      </>
    ));

    return <>{myContent}</>;
  }
}

export default Content;

ContentData.js

import React from "react";

const listsData = [
  {
    id: 1,
    name: "My alt tags",
    text: (
      <>
        <p>Lorem Imsum</p>
      </>
    ),
    mainContent: [
      {
        contentAll: (
          <>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry.
            </p>
            <img
              alt=""
              src="https://images.unsplash.com/photo-1637704758245-ed126909d374?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
            />
          </>
        )
      }
    ]
  }
];

export default listsData;

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

Answer 2

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

Answer 3

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