CODEWITHSUNDEEP
javascriptreactjs
joeyb123
joeyb123

Reputation: 33

How to reference JSX component props from array?

I have JSX components in an array, and want to reference their props and state by accessing them in the array.

let default = [
    <Space name="1" />,
    <Space name="2" color="#ffffff" />
]

let selected = default[0];

This gives me the error Cannot read property 'name' of undefined when trying to access the name prop I have set by doing selected.name.

I also tried using an array of regular objects ([new Space('1', '#ffffff'), etc]) and rendering them with a map, but while this let me access props from the array directly, I couldn't access the props from the render method.

I'm new to react so any help is appreciated.

Upvotes: 0

Views: 307

Answers (1)

Enrico Camponogara Da Silva
Enrico Camponogara Da Silva

Reputation: 31

The right way to do this are: Separate this two things. Declare an Array of objects likes this: const default = [{name: "Godzilla Firefox"}, {name: "Metallica"}] or not objects: const default = ["Samsung", "Apple"]. Then, you can make a map in the Array. const data = default.map(value ⇒ <Space key={value} name={value} />). Like this you can easily access the values. So, put in your render method the {data}. It's will be re-render every time as you change.

Upvotes: 1

Related Questions