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}
/>
</>
)
}
}()
];
Source: stackoverflow.com
Related Query
- How to access the value inside array of object within that array
- How can I access object value that is inside the object?
- how do i update state in react for updating the value of an object inside an array using array.map function
- How to push inside nested array of object that have a precise value of a key in MongoDB?
- Change the state value of the property of a particular object that is inside an array
- How to access the Object property within the method inside the Object in React Hooks
- How to prepend a value to an array inside the object of state in Reactjs
- How can we access objects value that is nested inside an object with integer property in JavaScript
- How can I toggle the display of an array that is located within each object of another array that comes from an API?
- How to update a single value of an object that is inside an array of objects
- How can I access two separate images in an array of objects and assign it to a third object inside the same array?
- How to loop through an array and display data within the object of that array, in react and javascript
- How add an object into the array list that is value of another object in Redux toolkit
- How to remove an element from an array that is inside an object in React JS (ES6)
- How to display and handle dynamic checkoxes that are dependent on Task array value in the backend (Mongodb) in react js?
- How do i update value of a key in an object inside an Array in React?
- How to display the content of an array inside an object in Reactjs
- How to use setState to update the property of an object inside an array the right way in class component?
- How can I render the contents of an array nested inside an object in React Admin's show/ArrayField component?
- How can I access JSON property of nested object inside object array
- Change the value of an object property name inside an array
- How to access the passed prop array inside the child component
- How can i access the history object inside of this promise call?
- how to print the elements value inside an object react using es6
- How to bring out an Object that inside double array
- How to change value of object which is inside an array
- How to loop an object that is inside an array and is inside an object? React
- How to iterate through the array inside json object
- How to update the value present inside array of array in reactjs
- How can loop through array of JSON Object to find property value that includes user input characters
More Query from same tag
- I'm trying to make a POST request to get receive access token, however I'm receiving undefined. How can I resolve this please?
- how to render address in textarea with only street, city and zipcode except geo property which is another nested object?
- Accessing Image Source as Props
- React select change the selected value
- React create app hot reload is not always working on linux
- React setAttribute in interval function
- Delay React onMouseOver event
- Reactjs state from parent to child component returns undefined
- What is the best way to use redux action in useEffect?
- useState setter not updating array immediately
- How to update parent's state?
- Updating state with new value to the object of array is really slow
- what if we accidently don't use '()' after calling the method
- MUI ListItem href prop not hitting my api routes
- React Redux filter actions (generic sorting example)
- How do I display local storage items in a list?
- Nesting Flux Data
- How to alert a Selected Record using Reactjs
- How to detect jwt token expire on React
- NextAuth.js for authentication with Google facing [client_fetch_error] with next.js
- Why x.func1 x.fun2 x.func3 functions do not work in onClick
- Creating a new room (including inputs and button) and only template shows without the values inside (rcc)
- react reset button clear text input area, javascript
- Mixed Content with heroku server
- React global ref
- Why is the src attribute not showing up when I open up the inspector tool?
- TypeError _this2.flipBook.getPageFlip is not a function
- Todo fetcher and Filter
- React.js zooming animation on a particular div?
- React render private route after redux(user authentication) is updated