A-frame-react : how to pass the value when .map()?

Question

I would like an Entity to spawn for each item added dynamically in the array.

Is it possible to do like this? How would I attribute the value of each item to each Entity ?

this.state = {
    items: []
}

then in the render :

    <Scene>
      {this.state.items.map((item, key) => {
        return (
            <Entity />
         )
        }
       )}
     </Scene>

score 0 · Accepted Answer · answered Feb 24 '19 at 00:45

You can map over the items in your component state and give the item string to the text prop of the Entity component.

Example

class VRScene extends React.Component {
  state = {
    items: ["lemon", "orange"]
  };

  componentDidMount() {
    setInterval(() => {
      this.setState(prevState => {
        return { items: [...prevState.items, Math.random()] };
      });
    }, 2000);
  }

  render() {
    return (
      <Scene>
        {this.state.items.map((item, index) => (
          <Entity
            key={item}
            text={{ value: item, align: "center" }}
            position={{ x: 0, y: 2 - index * 0.1, z: -1 }}
          />
        ))}
      </Scene>
    );
  }
}

A-frame-react : how to pass the value when .map()?

1 Answers1