score:0
i'll take a swing at what you are trying to do here:
<productsquare arrayid="door" />
in order to get to the door
array of your productinformation.js
file, it would probably be better to have a default export
:
/* productinformation.js */
export default {
door: [/* ...door info*/]
window: [/* ...window info */],
};
then when you import it, you would:
import products from "./productinformation.js";
for your map
function, you would want to use your products
import with your props.arrayid
:
const productsquares = products[this.props.arrayid].map(...);
in your current code, you are trying to map over the string prop you are passing to your component. what you want is to index the correct product array. you need to either create the default export
(written above), or create a map in your render function:
const productmap = { door: door, window: window };
const productsquares = productmap[this.props.arrayid].map(...);
score:1
as alan pointed out, i think the main problem is that when you are referring to this
, it is not bound to the main component. for functions that are not part of the standard react component lifecycle (constructor
, render
, componentdidmount
, etc), you must explicitly state that you bind it to the component like this
constructor(props)
{
super(props)
this.state = {};
this.populateproductsquares = this.populateproductsquares.bind(this);
}
that by itself should resolve the immediate problem you are facing.
in addition, i would point out a few things that would make your component a little bit easier to read. for example, having the internal function populateproductsquares
start with a capital letter, makes us think that it is a class or component, so i would rename that populateproductsquares
(or renderproductsquares
in my personal opinion to indicate what it does).
secondly, when you are looping through the products, you don't need to refer to this.props.arrayid[i]
since each object is already passed as the product
argument in the function (product, i) =>
when you use map
.
and you don't need to assign the result from this.props.arrayid.map(...)
to an constant since you are returning it right away.
lastly, since the only thing you are doing in the render
method is to call the populateproductsquares
function, it doesn't make sense to separate it into a separate function, you could just write it all directly in render
(as alan also pointed out). but there are a lot of useful cases where you do want to have it in a separate function, so i think it is important to understand the requirement for binding functions.
to summarise, here is how i might have done it (with a slightly different render function to showcase when you might want to have separate functions).
class productsquare extends component {
constructor(props)
{
super(props)
this.state = {};
this.renderproductsquares = this.renderproductsquares.bind(this);
}
renderproductsquares()
{
return this.props.arrayid.map((product, i) =>
<div classname = "productsquare" key={i}>
<img classname = "mainimage" src ={product.productimage} alt = "test"/>
<img classname = "companyimage" src ={product.companyimage} alt = "test"/>
<button classname = "addbutton">
add
</button>
<button classname = "infobutton">
info
</button>
</div>
);
}
render() {
return (
<div>
<h1>here are a bunch of product squares</h1>
{this.renderproductsquares()}
</div>
);
}
}
export default productsquare;
Source: stackoverflow.com
Related Query
- map over a array based on prop name, ReactJS
- Map over array of objects and filter based on first name
- How do I map over an array of objects in React and then conditionally render a component based on a previous value?
- React - map over array object and pass to options prop in react-select
- ReactJS - Rending Map Function with Nested Array in Prop
- Attempting to set the state of an array in ReactJS but not sure how to map over
- REACT: Map over nested array of objects
- how to update input text which is render by array map in REACTJS
- ES6 array map doesn't return anything: ReactJS
- ReactJS Warning: Each child in an array or iterator should have a unique "key" prop
- Reactjs -Each child in an array or iterator should have a unique "key" prop
- Loop an array index inside a map in ReactJS
- Displaying array of objects using map in reactJs
- REACT JS: Map over an array of objects to render in JSX
- How to map over array of multiple types in TypeScript?
- Map an array of arrays with ReactJS
- Reactjs objectlist groupby and map over
- Map over an array in MongoDB
- Each child in an array or iterator should have a unique "key" prop in reactjs
- Is there a way to map over the cities on my cities array using the api and rendering the info from all cities on the array?
- array map and populate the result based on object value
- Accessing Props to Map over Array in React Child?
- How to map over 2 Array of object in React and render to Table
- Reactjs map nested array to load image urls in <img> tag
- Need to Trigger individual Element in an array of elements written through map function reactjs
- Map over array playlists return unexpected token
- How to map over an array and pass it as props to child component correctly in React?
- React map over nested array
- Iterate over array of object using map till the second last object
- React - Map Over Array Of Components To Return
More Query from same tag
- Chart update in TradingView React component doesn't work
- How to check if object matches with values on checkbox click?
- Return multiple <td> from map without wrapping them within an enclosed tag
- JavaScript React Front-End: Opening one collapse button, all collapse buttons open instead of just the one
- How can redirect to Home page once a user is logged in?
- How to link an id from an object in an array to a button onClick?
- How can I implement increase or decrease quantity till countInStock of my my e-commerce project with the below code?
- Wait X time, then continue with the loop - JS React
- How to properly use the index of a map function to access an element in an array
- ANT Design Component, how to use Radio inside Table component instead of the checkbox?
- createPortal - TypeScript document.getElementById type issue when JavaScript runs fine?
- Jest : TypeError: require(...) is not a function
- react router relative link does not link properly
- I keep getting an invalid hook call error
- get variables through their name in react
- What is the proper way to implement optional query paramters in asp.net core?
- H1 tag value not showing when page loads up in React
- Rendering an error message after form submission in React
- React Importing a component folder
- a non anti-pattern approach to remove an item in an array of components in React
- React state returns undefined when passed as object value
- Trying to apply a class to a styled-component for an onclick event
- Conditional onSelectAll in react-bootstrap-table-next?
- React Native: TextInput toUpperCase does not work on Android in onChangeText
- can i add a common helper text for two textfields imported from MUI in reactjs?
- how to use react custom components?
- difference between {object.object} and Object.values(Object)?
- How can I replace screen with React Navigation for React Native
- Uncertainty with the !! operator (double negation)
- Adding property to element programmatically