React Js data.map creating formatting issue with divs

Question

I have a Golf Scorecard that displays fine if I manually generate each row using divs but when I try and generate the divs in a data.map loop then it the formatting is all lost and doesnt display correctly.

Here is the code:

             <div className="griditem"></div>
          <div className="griditem">Total</div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem yellow">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem red">
            <input type="text" className="input" />
          </div>
          <div className="griditem red">
            <input type="text" className="input" />
          </div>
          <div className="griditem fred">
            <input type="text" className="input fred" />
          </div>

This is how I put it in the data.map:

         {data.map((item, index) => (
        <div key={index}>
          <div className="griditem"></div>
          <div className="griditem">Total</div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem yellow">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem red">
            <input type="text" className="input" />
          </div>
          <div className="griditem red">
            <input type="text" className="input" />
          </div>
          <div className="griditem fred">
            <input type="text" className="input fred" />
          </div>
        </div>
      ))}

How the formatting should appear

how the formatting appears in a data.map

David · Accepted Answer · 2023-04-25 22:13:43Z

0

Because the resulting HTML is different. In the second example you're wrapping all of the elements in an outer <div> which isn't present in the first example:

{data.map((item, index) => (
  <div key={index}>
    {...}
  </div>
)}

If your styling is targeting a specific structure, changing that structure will break that styling. Either update the styling, or don't change the structure. You can wrap your elements in a React fragment instead:

{data.map((item, index) => (
  <React.Fragment key={index}>
    {...}
  </React.Fragment>
)}

answered Apr 25, 2023 at 22:13

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mvarta Over a year ago

If i hadnt put the original in a <div key={index}> originally I got an error. How would I update the styling above rather than using React.Fragment?

David Over a year ago

@mvarta: However your styling is defined, you'd change it to match the new structure.

mvarta · Accepted Answer · 2023-04-25 22:16:54Z

0

Got the answer eventually from here --> react js issue with rendering data in array.map()

 {data.map((item, index) => (
 <React.Fragment>
  </React.Fragment>
      ))}

edited Apr 25, 2023 at 22:16

answered Apr 25, 2023 at 22:15

mvarta

231 silver badge4 bronze badges

Collectives™ on Stack Overflow

React Js data.map creating formatting issue with divs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related