Question 60908 in Html Question posted in
Some basic documentation can be found here.

React Js data.map creating formatting issue with divs – Html

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

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

  2. 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>
)}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search