title: Set style property of elements in a map loop in JSX in React
body: <p>Good day</p>
  
  <p>I am busy teaching myself React for a new position I've recently started. I have a stupid question about syntax that I am unsure how to Google for.</p>
  
  <p>The below code is from a project I am trying to help with whilst learning. I have managed to comprehend the broad strokes, as I have a fair amount of JavaScript experience.</p>
  
  <p>I am trying to assign a top and left value for a graph that I am rendering on a map based on an x and y value I am getting from an object in an array that i am looping through with the map command. </p>
  
  <p>From my research so far, you need to build up the object you are using for the style tag before you use it in your JSX. I only have access to the values in the objects I am looping through inside the loop, and am struggling to read these values into the preexisting object I am using for the style.</p>
  
  <p>Previously defined object with default top and left values</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.chartStyle = { top: "15px", left: "15px" }
    }
  </code></pre>
  
  <p>Map loop where I need to change 'this.chartStyle' based on object data</p>
  
  <pre><code>this.props.data.data.map((d, i) =&gt; (
     &lt;div key={"key"+i} style={this.chartStyle}&gt;
         ...
     &lt;/div&gt;
  ))
  </code></pre>
  
  <p>I've tried creating an object on the fly, or changing the variable inside the loop, but I'm getting compiler errors so I'm obviously doing it in the wrong place.</p>
  
  <pre><code>    this.props.data.data.map((d, i) =&gt; (
         &lt;div key={"key"+i} style={top: d.y+"px, left: d.x}&gt;
             ...
         &lt;/div&gt;
      ))
  ...
      this.props.data.data.map((d, i) =&gt; (
         {this.chartStyle = {top: d.y+"px, left: d.x}}
         &lt;div key={"key"+i} style={this.chartStyle}&gt;
             ...
         &lt;/div&gt;
      ))
  </code></pre>
  
  <p>I would be very grateful if someone could please help me understand where I am going wrong.</p>